これを行う方法があるのだろうかと思います。たとえば、私はこのようなアニメーションを持っていますdemo on Codepen。 500ms後、次のキューブがアニメーション化されます。最初のアニメーション時間の1/2後に次のキューブをアニメーション化するにはどうしたらいいですか?私は.animate()でそれを作る方法を知っているが、今回はそれがの.css()であり、私はそれを行うための方法を見つけることができません。それは有り難いです!jqueryのstagger CSSアニメーション
$(function() {
$('button.action').on('click', function() {
$('.wrap .item').each(function(i) {
var $item = $(this);
setTimeout(function() {
$item.css({
'opacity': 1,
'transform': 'translateX(0)'
});
}, 500*i);
});
});
});
次のアニメーションは、最初のアニメーション時間の1/2で開始します。最初のものの最後ではありません。
あなたは* I、代わりに500 * I 250を配置しようとしましたか? – Luka
なぜ 'transition-duration'をsetTimout' 500'よりも2倍長く使用しないでください。私は 'transition-duration:1s'を意味します – disstruct
@Luka最初のアニメーションが終了した後ではなく、最初のアニメーションの1/2後に次のキューブの動きが欲しいという意味です。 –