How to start CSS3 animation in a specific place?

Question

I am using CSS3 animation and I want me to be able to go to a specific place in the animation. For example, if CSS looks like this (and pretend I used all the appropriate prefixes):

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

then I would like to stop the animation and transfer it by 50%. My guess is that perfect JavaScript would look something like this:

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

Does anyone know how to do this (hopefully in Webkit)?

Answer 1

We can use the animation-delay property. This usually delays the animation for some time, and if you set animation-delay: 2s; , the animation starts two seconds after you apply the animation to the element. But you can also use it to get it to start playing the animation with a specific time shift using a negative value:

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

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