Gestión de Estados de Animación en CSS
Propiedad animation-fill-mode
Podemos controlar los estilos de un elemento antes y después de que se ejecute la animación. animation-fill-mode
especifica si un elemento debe mantener su estado final de la animación o volver a su estado original.
animation-fill-mode: none | forwards | backwards | both
none
- Este es el valor predeterminado. La animación no afectará la visualización del elemento antes ni después de la animación. El elemento se verá igual que al inicio;forwards
- Significa que los estilos al final de la animación permanecerán en el elemento y no volverá a su vista inicial;backwards
- Significa que el elemento tendrá los estilos especificados al inicio de la animación. Incluso si la animación se activa al pasar el cursor o tiene algún retraso;both
- Combinabackwards
yforwards
. Significa que antes de que se ejecute la animación, el elemento tendrá los estilos especificados al inicio de la animación. Después de que se ejecute la animación, el elemento tendrá los estilos establecidos al final de la animación.
Consideremos el siguiente ejemplo para comprobar la diferencia entre los valores. Se realizó para mostrar que el estado del elemento nunca cambiará si hemos aplicado animation-fill-mode
con el valor correcto. Después de ejecutar el código, el estado final de los elementos será inalterable. Si necesitamos ver la animación nuevamente, por favor recargue la página.
index.html
index.css
Propiedad animation-play-state
Podemos controlar el estado de reproducción de la animación. Puede estar en pausa o en ejecución.
animation-play-state: running | paused
running
- Este es el valor predeterminado. Inicia o reanuda la animación;paused
- Detiene la animación en el estado actual.
Considerar el siguiente ejemplo, donde se detiene la animación infinita al pasar el cursor.
index.html
index.css
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 2.04
Gestión de Estados de Animación en CSS
Desliza para mostrar el menú
Propiedad animation-fill-mode
Podemos controlar los estilos de un elemento antes y después de que se ejecute la animación. animation-fill-mode
especifica si un elemento debe mantener su estado final de la animación o volver a su estado original.
animation-fill-mode: none | forwards | backwards | both
none
- Este es el valor predeterminado. La animación no afectará la visualización del elemento antes ni después de la animación. El elemento se verá igual que al inicio;forwards
- Significa que los estilos al final de la animación permanecerán en el elemento y no volverá a su vista inicial;backwards
- Significa que el elemento tendrá los estilos especificados al inicio de la animación. Incluso si la animación se activa al pasar el cursor o tiene algún retraso;both
- Combinabackwards
yforwards
. Significa que antes de que se ejecute la animación, el elemento tendrá los estilos especificados al inicio de la animación. Después de que se ejecute la animación, el elemento tendrá los estilos establecidos al final de la animación.
Consideremos el siguiente ejemplo para comprobar la diferencia entre los valores. Se realizó para mostrar que el estado del elemento nunca cambiará si hemos aplicado animation-fill-mode
con el valor correcto. Después de ejecutar el código, el estado final de los elementos será inalterable. Si necesitamos ver la animación nuevamente, por favor recargue la página.
index.html
index.css
Propiedad animation-play-state
Podemos controlar el estado de reproducción de la animación. Puede estar en pausa o en ejecución.
animation-play-state: running | paused
running
- Este es el valor predeterminado. Inicia o reanuda la animación;paused
- Detiene la animación en el estado actual.
Considerar el siguiente ejemplo, donde se detiene la animación infinita al pasar el cursor.
index.html
index.css
¡Gracias por tus comentarios!