Javascript 将循环动画设置（或暂停）到结束关键帧

是否可以在结束关键帧处停止无限循环动画，或将动画设置为结束关键帧

我有一个动画，我想一次又一次地播放，但能够在每次迭代后精确地在关键帧末尾暂停它

我想这将是简单的暂停动画与

animatedElement.on(
    "animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration",
    function () {
        animatedElement.css({
            "-moz-animation-play-state": "paused",
            "-o-animation-play-state": "paused",
            "-webkit-animation-play-state": "paused",
            "animation-play-state": "paused"
        });
    }
);

但问题是当动画暂停时，它已经在下一次迭代中开始了。因此，在实践中，动画不会在关键帧结束时停止，而是在下一个动画迭代开始时停止

换句话说，在下面的动画中，动画不会在100%90度停止，而是在动画再次从0%0度开始后的一段短时间内停止

@keyframes rotateAnim {
    0% {
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

    100% {
        -moz-transform: rotateY(90deg);
        -ms-transform: rotateY(90deg);
        -o-transform: rotateY(90deg);
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
    }
}

---

为什么不让动画迭代计数为1，然后再重置动画？也许可以。如果我理解正确的话，重置动画的方法似乎很粗糙。回流法似乎只对ChromeFor有效，对我个人来说是更好的方法，但这是一个意见问题，在你的链接中引用Oli Studholme方法，第一个，你有两个相同但名称不同的动画，你只需交换类。谢谢！我现在更改了代码，删除并重新添加动画类以重复动画，而不是使用动画迭代计数：无限。现在它起作用了。