Q:

How can I start CSS3 Animations at a specific spot? 

I'm using CSS3 Animations, and I want to be able to move to a specific spot in the animation.   For instance, if the CSS looks like this (and pretend that I used all the proper 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 be able to stop the animation, and move it to the 50% mark.   I guess that the ideal 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 of a way to make this happen (hopefully in Webkit)? 

A:

We can use the animation-delay property.  Usually it delays animation for some time, and, if you set animation-delay: 2s;, animation will start two seconds after you applied the animation to the element.  But, you also can use it to force it to start playing animation with a specific time-shift by 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/

