Propiedades CSS para Animaciones: Dirección, Relleno y Estado de Reproducción

Clase 8 de 12 • Curso de Animaciones con CSS

Clase anteriorSiguiente clase

Resumen

En esta clase, hablaremos de 3️⃣ propiedades que nos hacen falta para el tema de las animaciones que son:

📍 Animation direction 📍 Animation fill mode 📍 Animation play state

Las cuales veremos en un instante.

Propiedades 🎯

Animation Direction 🗽

Dirección de la animación.

  • Normal: La animación se reproduce hacia delante en cada ciclo. Por defecto.
  • Reverse: La animación se reproduce hacia atrás en cada ciclo.
  • Alternate: La animación se invierte en cada ciclo, y la primera iteración se reproduce hacia adelante.
  • Alternate-reverse: La animación invierte la dirección en cada ciclo, y la primera iteración se reproduce hacia atrás.

Animation Fill Mode 📢

Estado de cierta animación. Al inicio o final.

Animation Play State ⏯

Define si la animación se reproduce o es pausada. (running or paused)

Una vez tengamos aplicada estas últimas propiedades, tendríamos listo nuestro proyecto, el cual podrás verlo aquí{target="_blank"}.

Hemos visto en este módulo, muchísimas propiadades para terminar nuestra animación. Falta muy poco para terminar 🎊.

Solo nos faltaría un última detalle que sería el tema del rendimiento.

Nos vemos en la siguiente articlase 💚.

Fuentes

Contribución creada con los aportes de: Jesús Velázquez Jiménez y Angel David Osorio Leyva.