0

我在每次迭代时都无法准确地停止 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说它会在最后）。

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

您会注意到帧的右边框不会回到动画之前的位置。

有人有线索吗？谢谢

4

0 回答 0