Come posso avviare animazioni CSS3 in un punto specifico?

Question

Uso le animazioni CSS3 e voglio essere in grado di spostarmi in un punto specifico dell'animazione. Per esempio, se il CSS si presenta così (e far finta che ho usato tutti i prefissi propri):

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

poi mi piacerebbe essere in grado di fermare l'animazione, e spostarlo la soglia del 50%. Credo che il JavaScript ideale sarebbe simile a questa:

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

Qualcuno sa di un modo per rendere questo accada (si spera in Webkit)?

Answer 1

Possiamo usare la proprietà animation-delay. Di solito ritarda l'animazione per un po 'di tempo e, se si imposta animation-delay: 2s;, l'animazione inizierà due secondi dopo aver applicato l'animazione all'elemento. Ma, è anche possibile utilizzarlo per forzarlo per iniziare a giocare animazione con uno specifico time-shift utilizzando un valore negativo:

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

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