使用 @keyframes 以不透明度淡出時，如何使用事件重復動畫？

Question

如果用戶嘗試拖放已經被拖動的元素，我會為用戶彈出一個標簽。

問題是，動畫只發生一次，在動畫結束時，它的不透明度永遠為 0。

CSS

@keyframes smooth {
0% { opacity: 1;}
100% { opacity: 0;}
}

.o_tip{
    position: absolute;
    z-index: 999;

    display: none;
    opacity: 0;

    -webkit-animation: smooth 2s ease-in;
    -moz-animation: smooth 2s ease-in;
    -o-animation: smooth 2s ease-in;
    -ms-animation: smooth 2s ease-in;
    animation: smooth 2s ease-in;
}

為了說明我的問題，如果我在opacity: 0.2而不是opacity: 0上“結束”動畫：

@keyframes smooth {
0% { opacity: 1;}
100% { opacity: 0.2;}
}

...然后標簽會為每個事件重新出現 - 但它不會再次淡出，這是我想做的。

Answer 1

您可以將動畫規則放在特定的 css 類規則中，然后再次單擊添加該類。 請記住以下幾點：

1. 您需要先刪除動畫類，然后再添加它才能產生任何效果。
2. 即使您遵循第一點，刪除類並重新添加它也不會有任何視覺效果。 要觸發回流，您可以使用以下語句： void targetDiv.offsetWidth; .

 document.querySelector("#start-animation").onclick = function(e){ var targetDiv = document.querySelector("#mydiv"); targetDiv.className = ""; void targetDiv.offsetWidth; // this triggers UI reflow targetDiv.classList.add("o_tip"); }//onclick

 @keyframes smooth { 0% { opacity: 1;} 100% { opacity: 0;} } .o_tip{ z-index: 999; animation: smooth 2s ease-in forwards; } #mydiv{ background-color: yellow; height: 50px; width: 100px; } #mydiv.o_top{ display: block; }

 <div id="mydiv"></div> <button id="start-animation">Start animation</button>