Question

我无法准确地在每次迭代中停止CSS动画。我有一个CSS动画，当我调用一个函数时我想要播放它，当我打电话给另一个函数时再次向后播放它。为此，我在CSS / javascript中设置无限动画，如下所示：

function setup(container, element){
   var elem = document.getElementById(container).getElementsByClassName(element)[0];
   elem.style.webkitAnimationName=elemento+"_move";
   elem.style.webkitAnimationDuration="350ms";
   elem.style.webkitAnimationPlayState = "paused";
   elem.style.webkitAnimationDirection="alternate";
   elem.style.webkitAnimationIterationCount = "infinite";
   elem.addEventListener("webkitAnimationIteration", pause, false);
}

请注意，我在最后一行设置了一个eventListener，以便动画在每次迭代时使用fallowing函数暂停：

function pause(event){
    this.style.WebkitAnimationPlayState = "paused";
}

当我向前播放动画时，该功能正常工作，但是当我使用另一个功能将“WebkitAnimationPlayState”设置为“正在运行”并且向后播放时，它会停止运行。像一个框架出来的地方。这是我用来重新启动的功能：

function run(container, element){
    var elem = document.getElementById(container).getElementsByClassName(elemento)[0];
    elem.style.WebkitAnimationPlayState = "running";
}

我不知道它是向前还是向后的一帧但是每次尝试距离都是不同的。我相信该函数会在迭代的真正结束之前暂停动画（Apple Documentations表示它将在最后）。

这是我到目前为止所做的。 DEMO

你可以注意到框架的右边框没有回到动画之前的位置。

有人有线索吗？谢谢

如何在javascript中使用webkitAnimationIteration事件正确停止无限的CSS动画？

0 个答案: