显示动画图像的最佳方式（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>