.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 關注
- 166 瀏覽
添加回答
舉報
0/150
提交
取消