.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>发生变化，然后当我们移除鼠标时，与标签关联的类会再次发生变化。但我们要如何解决它呢？
1 回答
明月笑刀无情
TA贡献1828条经验 获得超4个赞
动画正在触发，因为: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);
});
- 1 回答
- 0 关注
- 97 浏览
添加回答
举报
0/150
提交
取消