Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Gestión de Estados de Animación en CSS | Animaciones Avanzadas en CSS
Técnicas Avanzadas de CSS

bookGestió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 - Combina backwards y forwards. 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.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

¿Cuál es el propósito de la propiedad animation-fill-mode?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 4

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 2.04

bookGestió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 - Combina backwards y forwards. 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.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

¿Cuál es el propósito de la propiedad animation-fill-mode?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 4
some-alt