为什么关键帧动画会重复多次？
.a.b{
border: 2px solid red;
animation-name: appear;
animation-duration: 1s;
animation-iteration-count: 1;
}
@keyframes appear{
from{opacity:0;
transform:rotateZ(20deg);
top:100;}
to{opacity:1;
top:0;
transform:rotate(0);}
}
@keyframes zoomer{
from{
opacity:0.5;
}
to{
opacity:1;
}
}
.a.b:hover{
animation: zoomer 1s linear 1;
}
<html>
<head>
</head>
<body>
<div>
<h1 class="a b">hello world</h1>
</div>
</body>
</html>
在上面的代码片段中，为什么@keyframes当我使用悬停时动画会重复？迭代次数指定为 1。
我的猜测是，当我们悬停时，与标签关联的类会<h1>发生变化，然后当我们移除鼠标时，与标签关联的类会再次发生变化。但我们要如何解决它呢？
饮歌长啸浏览 98回答 1
1回答
-
明月笑刀无情
动画正在触发，因为:hover伪类覆盖了<h1>的animation属性。当伪类被删除时，animation属性再次“更改”，回到其原始值，从而触发动画。有几种方法可以避免这种行为。如果您希望加载<h1>动画，但不再加载，请考虑创建一个单独的类：.a.b.onload { animation-name: appear; animation-duration: 1s; animation-iteration-count: 1;}然后在 Javascript 中，等待 1 秒初始动画完成后删除该类：window.addEventListener("DOMContentLoaded", () => { setTimeout( () => { document.querySelector(".a.b").classList.remove("onload") }, 1000);});
随时随地看视频慕课网APP
相关分类
Html5