11

CSS3 アニメーションを使用していますが、アニメーションの特定の場所に移動できるようにしたいと考えています。たとえば、CSS が次のようになっている場合 (そして、すべての適切なプレフィックスを使用したふりをします):

@keyframes fade_in_out_anim {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
#fade_in_out {
  animation: fade_in_out_anim 5s;
}

次に、アニメーションを停止して、50% マークに移動できるようにしたいと思います。理想的な JavaScript は次のようになると思います。

var style = document.getElementById('fade_in_out').style;
style.animationPlayState = 'paused';

// Here comes the made up part...
style.animation.moveTo('50%'); // Or alternately...
style.animationPlayPosition = '50%';

これを実現する方法を知っている人はいますか (できれば Webkit で)。

4

1 に答える 1

28

物件を利用できanimation-delayます。通常、アニメーションはしばらく遅延します。 を設定animation-delay: 2s;すると、要素にアニメーションを適用してから 2 秒後にアニメーションが開始されます。ただし、負の値を使用して、特定のタイムシフトでアニメーションの再生を強制的に開始することもできます。

.element-animation{
animation: animationFrames ease 4s;
animation-delay: -2s;
}

http://default-value.com/blog/2012/10/start-css3-animation-from-specified-time-frame/

于 2012-12-03T16:10:33.850 に答える