Javascript 显示动画图像的最佳方式（HTML/CSS/JS）

在我的网站上，我试图展示一枚硬币在空中被多次翻转并回到水面的动画。当动画结束时，它应该成为硬币落在一边的静态图像。 我找到了多种方法来实现这一点，比如CSS动画、精灵等等，。。。但是，如果我想要一个相当高级的动画，CSS动画的选项似乎非常有限，而其他动画似乎也有一些缺陷。

---

在一定时间内显示动画图像，然后变成静态图像的最佳方法是什么？

一个选项是使用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>

var image=document.getElementById（'yourImage'）；
setTimeout（changeImage，毫秒到内扇动）；
函数changeImage（）{
image.src=“staticImage.png”；
}