顯示動畫圖像的最佳方式（HTML/CSS/JS）

Question

在我的網站上，我試圖展示硬幣在空中翻轉多次並回到表面的動畫。當動畫結束時，它應該成爲硬幣落地的一面的靜態圖像。 我發現了多種方式來做到這一點，如CSS動畫，精靈，但如果我想要一個相當先進的動畫，其他人似乎也有一些缺陷，CSS動畫的選項似乎非常有限。 什麼是在一段時間內顯示動畫圖像然後變成靜態圖像的最佳方法？

Answer 1

一個選項是使用Javascript。你可以這樣做：

<img src="animation.gif" alt="coin" id="yourImage"> 

<script> 
    var image = document.getElementById('yourImage'); 
    window.setTimeout(changeImage, millisecondsToEndOfAnimation); 
    function changeImage() { 
     image.src = "staticImage.png"; 
    } 
</script>