CSS3 Animasyonlarını belirli bir noktadan nasıl başlatabilirim?

Question

CSS3 Animasyonlarını kullanıyorum ve animasyondaki belirli bir noktaya taşınabilmeyi istiyorum. Örneğin, CSS (ve tüm uygun önekleri kullandığı iddia) aşağıdaki gibiyse:

@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; 
} 

sonra animasyonu durdurmak mümkün ister ve% 50 işaretine taşımak olacaktır.

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%'; 

herkes bu (umarım Webkit olarak) gerçekleşmesi için bir yol biliyor mu: Ben ideal bir JavaScript şuna benzer olacağını tahmin?

Answer 1

animation-delay özelliğini kullanabiliriz. Genellikle bir süreliğine animasyonu erteler ve animation-delay: 2s;'u ayarlarsanız, animasyonu öğeye uyguladıktan sonra iki saniye sonra animasyon başlar. Ama, aynı zamanda negatif bir değer kullanarak belirli bir zaman değişiminin ile animasyon oynamaya başlamak için zorlamak için kullanabilirsiniz:

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

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