5

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 秒後に、margin-left または left 属性を -200px から 200px の間で変更したいと思います。

jquery と everytime() を使用して、次のようなことができることを理解しています。

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

しかし、これを行うために css ループを js に結び付ける方法はありますか? つまり、アニメーションと完全に同期するためにjsがリッスンできるあらゆる種類のリターンコールがありますか? 70 秒のタイマーで JS を使用すると、タイミングが正しく同期されず、css アニメーションの途中で js がタイミング ループを実行し、パラシュートがその場所の半分をジャンプするのではないかと心配しています。アニメーションの途中。

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

4

2 に答える 2

14

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このようにして、アニメーションがいつ終了し、変更が正しく適用されるかを正確に知ることができます。

于 2012-05-16T00:56:53.250 に答える