如何解决在悬停中定义了另一个动画时,动画会重复
我想在页面加载时制作动画。如果在#logo
中定义了一个以上的动画,并且我将鼠标移离徽标,则我在#logo:hover
中定义的动画将重复。如何解决?
@keyframes pulse_logo {
5% {
opacity: 0;
}
8% {
opacity: 1;
}
10% {
opacity: 1;
}
14% {
opacity: 0;
}
18% {
opacity: 1;
}
}
@keyframes popout {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
#logo {
transition: 0.3s;
animation: popout 1s ease;
}
#logo:hover {
filter: invert(1);
animation-name: pulse_logo;
animation-duration: 4s;
animation-iteration-count: infinite;
}
解决方法
我认为,您能做的最好的就是将第二个动画应用于内部元素,例如跨度,像这样:
body {
background-color: #777;
font-size: 4rem;
}
@keyframes pulse_logo {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes popout {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
#logo {
animation: popout 1s ease;
transition: all .5s;
}
#logo span:hover {
filter: invert(1);
animation: pulse_logo 500ms ease infinite;
}
<p id="logo"><span>Text</span><p>
,
尝试将效果用不同的id名称放入div。
body {
background-color: #777;
}
@keyframes pulse_logo {
5% {
opacity: 0;
}
8% {
opacity: 1;
}
10% {
opacity: 1;
}
14% {
opacity: 0;
}
18% {
opacity: 1;
}
}
@keyframes popout {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
#logo {
font-size: 80px;
transition: 0.3s;
animation: popout 1s ease;
}
#logoh:hover {
filter: invert(1);
animation-name: pulse_logo;
animation-duration: 4s;
animation-iteration-count: infinite;
}
<div id="logo">
<p id="logoh">Text
<p>
</div>
,
保留两个动画,仅调整animation-play-state
body {
background-color: #777;
}
#logo {
font-size: 80px;
transition: 0.3s;
animation:
popout 1s ease,pulse_logo 4s infinite paused;
}
#logo:hover {
filter: invert(1);
animation-play-state:running;
}
@keyframes pulse_logo {
5% {
opacity: 0;
}
8% {
opacity: 1;
}
10% {
opacity: 1;
}
14% {
opacity: 0;
}
18% {
opacity: 1;
}
}
@keyframes popout {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
<p id="logo">Text<p>
或者只更改您需要的一个:
body {
background-color: #777;
}
#logo {
font-size: 80px;
transition: 0.3s;
animation:
popout 1s ease,random_name 4s infinite; /* a random name here that you change on hover */
}
#logo:hover {
filter: invert(1);
animation:
popout 1s ease,pulse_logo 4s infinite;
}
@keyframes pulse_logo {
5% {
opacity: 0;
}
8% {
opacity: 1;
}
10% {
opacity: 1;
}
14% {
opacity: 0;
}
18% {
opacity: 1;
}
}
@keyframes popout {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
<p id="logo">Text<p>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。