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