Estou usando animações CSS3 e quero ser capaz de mudar para um ponto específico na animação. Por exemplo, se o CSS se parece com isso (e fingir que usei todos os prefixos apropriados):

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

então eu gostaria de poder parar a animação e movê-la para a marca de 50%. Eu acho que o JavaScript ideal seria algo como isto:

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

Alguém sabe de uma maneira de fazer isso acontecer (espero que no Webkit)?