Introducción

Hemos añadido animaciones ampliando las opciones existentes en tailwind estandard de forma que no tengas que preocuparte con plugins adicionales, pero ademas hemos añadido nuevas clases de utilidad para dotarle de una mayor funcionalidad. 

Con Tailwind podiamos programar la duracion y retraso de las transformaciones pero no asi en las animaciones existentes, asi pues en cuanto a propiedades hemos añadido:

  • animate-delay
  • animate-duration
  • animate-iteration-count
  • animate-fill-mode
  • animate-steps
  • animate-range
  • view-animate

Animaciones disponibles

Tailwind actualmente cuanta con un numero de animaciones muy escaso, según puede verse en la documentacion solo tiene disponibles:

  • animation-none
  • animate-spin
  • animate-ping
  • animate-pulse
  • animate-bounce

Con el plugín de flowtitude ademas contaras con multitud de efectos. Queremos dar las gracias publicamente a Julien Thibeaut creador de todas las animaciones. Puedes ver la lista y su funcionamiento, asi como el código en https://animation.ibelick.com/

Animate delay

Utilidades dinámicas para controlar el retraso con que debe empezar una animación. Actualmente aunque admite valores arbitrarios tiene predifinidos los siguientes valores:

animate-delay-none
animate-delay-0
animate-delay-75
animate-delay-100
animate-delay-150
animate-delay-200
animate-delay-300
animate-delay-400
animate-delay-500
animate-delay-600
animate-delay-700
animate-delay-800
animate-delay-900
animate-delay-1000

Los valores son expresados en milisegundos

Animate duration

Utilidades dinámicas que determinan la duración de la animación, es decir la rapidez con que se efectúa. Actualmente aunque admite valores arbitrarios tiene predifinidos los siguientes valores:

animate-duration-none
animate-duration-slower
animate-duration-slow
animate-duration-normal
animate-duration-fast
animate-duration-faster
animate-duration-0
animate-duration-75
animate-duration-100
animate-duration-150
animate-duration-200
animate-duration-300
animate-duration-400
animate-duration-500
animate-duration-600
animate-duration-700
animate-duration-800
animate-duration-900
animate-duration-1000

Los valores son expresados en milisegundos, tambien tiene unos valores semanticos predefinidos que van de desde los 500ms a los 100ms, en una proxima versión, sustituirenos los valores semanticos por variables para que se puedan configurar según las necesidades.

Animate iteration count

Establece el numero de veces que se ha de ejecutar la animación antes de detenerse. Los valores establecidos son los siguientes:

animate-iteration-count-none
animate-iteration-count-1
animate-iteration-count-2
animate-iteration-count-3
animate-iteration-count-infinite
Animate fill mode

La propiedad CSS animation-fill-mode especifica cómo un elemento animado debe aplicar los estilos tanto antes como después de que se ejecute la animación. Es muy útil para controlar los estados de los estilos en diferentes fases de la animación.

animate-fill-mode-none
animate-fill-mode-forwards
animate-fill-mode-backwards
animate-fill-mode-both
  • none: Este es el valor predeterminado. El elemento no retiene ningún estilo establecido por la animación, y volverá a su estado inicial una vez que la animación haya finalizado.
  • forwards: El elemento retendrá el estilo del último fotograma clave de la animación, incluso después de que la animación haya terminado. Si el último fotograma clave no tiene un valor para algunas propiedades, esas propiedades volverán a su estado inicial.
  • backwards: La animación aplicará el estilo del primer fotograma clave durante el período de retraso de la animación (si se ha definido un animation-delay positivo). Esto significa que el primer fotograma clave afecta al elemento antes de que comience la animación propiamente dicha.
  • both: Combina los efectos de forwards y backwards. El elemento mantendrá el estilo del primer fotograma clave durante el retraso y el del último fotograma clave después de que la animación termine.
Animate steps

Estas clases de utilidad permiten controlar el tiempo de una animación dividiéndola en intervalos discretos o «pasos». Esto crea un efecto de «cuadro por cuadro» o «stop-motion», en el que los cambios visuales se presentan en saltos en lugar de una transición suave. Esta función es particularmente útil cuando quieres simular movimientos mecánicos o dar un efecto de animación digital más rígido.

animate-steps-none
animate-steps-retro
animate-steps-normal
animate-steps-modern
View animate

Estas clases de utilidad permiten controlar el tiempo de una animación dividiéndola en intervalos discretos o «pasos». Esto crea un efecto de «cuadro por cuadro» o «stop-motion», en el que los cambios visuales se presentan en saltos en lugar de una transición suave. Esta función es particularmente útil cuando quieres simular movimientos mecánicos o dar un efecto de animación digital más rígido.

view-animate-[--subjectReveal]