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-delaypositivo). Esto significa que el primer fotograma clave afecta al elemento antes de que comience la animación propiamente dicha. - both: Combina los efectos de
forwardsybackwards. 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]