javascript - javascriptでwebkitAnimationIterationイベントを使用して無限のCSSアニメーションを適切に停止するには?

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 を設定していることに注意してください。これにより、アニメーションは次の関数を使用して反復ごとに一時停止します。

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

アニメーションを順方向に再生すると関数は正常に動作しますが、別の関数を使用して「WebkitAnimationPlayState」を「実行中」に設定し、再生を逆方向にすると、場違いに停止します。場違いの1フレームのように。これが私がそれを元に戻すために使用する関数です：

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

1フレーム前か後ろかはわかりませんが、毎回試してみると距離が異なります。この関数は、反復の実際の終了の少し前にアニメーションを一時停止すると思います (Apple のドキュメントでは、最後になると述べています)。

これが私がこれまでに行ったことです。 デモ

フレームの右端がアニメーション前の位置に戻っていないことがわかります。

誰にも手がかりがありますか？ありがとう