特定の場所でCSS3アニメーションを開始するにはどうすればよいですか？

Question

私は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％のマークに移動します。

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の中で）これを実現するための方法を知っています：私は、理想的なJavaScriptは次のようになりますことを推測しますか？

Answer 1

animation-delayプロパティを使用できます。通常、アニメーションはしばらくの間遅れます.に設定すると、アニメーションを要素に適用してから2秒後にアニメーションが開始されます。しかし、あなたはまた、負の値を使用して、特定のタイムシフトでアニメーションの再生を開始することを強制するためにそれを使用することができます：

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

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