¿Cómo puedo iniciar animaciones CSS3 en un lugar específico?

Question

Estoy usando animaciones CSS3, y quiero ser capaz de moverme a un lugar específico de la animación. Por ejemplo, si el CSS se parece a esto (y pretendo que he utilizado todos los prefijos apropiados):

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

entonces me gustaría ser capaz de detener la animación, y moverlo a la marca del 50%. Supongo que el JavaScript ideal sería algo como esto:

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

¿Alguien sabe de una manera de hacer que esto suceda (esperemos que en Webkit)?

Answer 1

Podemos usar la propiedad animation-delay. Por lo general, retrasa la animación durante un tiempo y, si configura animation-delay: 2s;, la animación comenzará dos segundos después de aplicar la animación al elemento. Sin embargo, también se puede utilizar para obligarlo a empezar a jugar la promoción con el cambio de tiempo específico mediante el uso de un valor negativo:

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

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