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

Question

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

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

我认为通过暂停动画

会很容易

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);
    }
}

JSFiddle example