css3アニメーションループにランダムに追加する

Question

css3アニメーションループを実行するたびに、スタイル内の変数を変更したいと思います。

たとえば次のCSSは、画面の上から下へパラシュートのグループをドロップ：

@-webkit-keyframes fall { 
    0% { top: -300px; opacity: 100; } 
    50% { opacity: 100; } 
    100% { top: 760px; opacity: 0; } 
} 

#parachute_wrap { 
    -webkit-animation-name: fall; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 70s; 
    -webkit-animation-timing-function: linear; 
} 

理想しかし、私は、ランダムXに投げるしたい各ループの最後でポジション。

グループのデフォルトのスタイルがある：

#parachute_wrap { 
    position: absolute; 
    top: -300px; 
    left: 50%; 
    margin-left: 140px; 
} 

だから、70秒後に、私はどこでも-200pxと200pxの間のマージン左または左の属性を変更したいと思います。

$('#parachute_wrap').everyTime (70000, function(){ 
    $("#parachute_wrap").css({left: Math.floor(Math.random() * 51) + 5 + '%'},0); 
}); 

しかし、これを行うには、JSにCSSループを結びつけるための方法があります：

I）は、（私はjQueryと毎回でこのような何かを行うことができます理解できますか？すなわち、jsがアニメーションとの完璧な同期のために聴くことができる任意の種類のリターンコールがあるか？ 70秒タイマーでJSを使用すると、タイミングが正しく同期されず、CSSアニメーションの途中でjsがタイムループを実行し、パラシュートがその半分の周りをジャンプすることになることが懸念されますアニメーションの途中で

これにどのようにアプローチしますか？

Answer 1

CSS3アニメーションは、アニメーションが完了するとanimationEndイベントが発生します。

あなたはbindそのイベントをお使いのアニメーション要素のように、各アニメーションの最後にそのleft変更トリガすることができます。

$('#parachute_wrap').on('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd', function(e) { 
    $(this).css({left: Math.floor(Math.random() * 51) + 5 + '%'},0); 
}); 

をこのように、あなたはアニメーションの終了を正確に知っているとleft変更が正しく適用されています。

Answer 2

新しいアニメーションの繰り返しが開始するたびに、つまり最初のアニメーションを除くすべての繰り返しが開始されるというイベントも発生します（animationiteration）。

$('#parachute_wrap').on('animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration', function(e) { 
    $(this).css({left: Math.floor(Math.random() * 51) + 5 + '%'},0); 
}); 

http://www.w3.org/TR/css3-animations/#animationiteration