Pregunta sobre webkit, javascript, css3, css-animations – ¿Cómo puedo iniciar animaciones CSS3 en un lugar específico?

6

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)?

Quiero poder crear un control deslizante o una interacción táctil que permita al usuario desplazarse a lo largo de una animación. Me decidí a dividir la animación en etapas hasta que descubra cómo hacer lo que necesito. Joel A. Shinness
¿Puedes dar más información sobre cuál es tu meta? Porque si solo quieres comenzar una animación a mitad de camino, te recomendaría dos animaciones, una que comienza en un 50% y la otra en el efecto completo, luego elige entre ellas usando clases. OverZealous

Tu respuesta

1   la respuesta
20

Podemos usar elanimation-delay propiedad. Por lo general, demora la animación durante algún tiempo y, si estableceanimation-delay: 2s;, la animación comenzará dos segundos después de que hayas aplicado la animación al elemento. Pero, también puede usarlo para forzarlo a comenzar a reproducir animaciones con un cambio de tiempo específico usando un valor negativo:

<code>.element-animation{
animation: animationFrames ease 4s;
animation-delay: -2s;
}
</code>

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

Esta debe ser la respuesta seleccionada. Es fácil de implementar y está claro. Adam

Preguntas relacionadas