平穩停車CSS無限循環動畫

Question

我有一個後一段時間（這個時間的變化），具有無限的動畫

animation: start .75s steps(19) infinite; 

現在一個元素，我想停止動畫，但是，使其運行流暢了。當我通過刪除動畫類通過jQuery停止動畫時，它就停止了。

我希望你對此有個想法？

Answer 1

嘗試使用這個非常簡單的JavaScript語法：

function stopAnimation(){ 

document.getElementById('animationElement').setAttribute('class', 'displayNone'); 
}; 
setTimeout(stopAnimation, 5000); 

我們所定位的id是其中一個做動畫，我們給它一個名爲「displayNone」類，這是在我們的CSS file.after在此之後，我們稱之爲5秒後所做的所有功能，即動畫結束時的功能。你可以改變它到任何你想要動畫結束的時候。

，並添加到您的CSS：

.displayNone{ 
display: none; 
} 

N.B：確保添加CSS代碼之前，動畫屬性，否則它不會工作