¿Cómo puedo iniciar animaciones CSS3 en un lugar específico?
Estoy usando animaciones CSS3, y quiero poder moverme a un lugar específico en la animación. Por ejemplo, si el CSS tiene este aspecto (y pretenda que usé todos los prefijos adecuados):
<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>
entonces me gustaría poder detener la animación y moverla a la marca del 50%. Supongo que el JavaScript ideal sería algo así:
<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>
¿Alguien sabe de una manera de hacer que esto suceda (con suerte en Webkit)?