Animaciones
Transiciones
Para animar los cambios de valor en las propiedades que lo permiten necesitamos activar esas animación con las clases transition-*. Para ello disponemos de varias opciones:
- transition, transition-all → Son similares y activan las animaciones en todas las propiedades CSS soportadas
- transition-colors → Animaciones en el cambio de color en fondos, textos o bordes, por ejemplo.
- transition-opacity → Anima el cambio de opacidad
- transition-shadow →Anima el cambio de sombra (box-shadow)
- transition-transform → Anima los cambios de las propiedades transform, scale, translate y rotate.
Además, se puede personalizar las propiedades a animar entre corchetes. Por ejemplo: transition-[filter,opacity].
Con las clases transition-duration-* podemos cambiar la duración de la animación.
La curva de animación la podemos controlar con las clases ease-*. Por ejemplo: ease-linear, ease-in, ease-in-out, ...
El retraso a la hora de iniciar la animación se gestionar con las clases delay-* (generalmente en ms). Por ejemplo: delay-150.
<div class="flex group gap-2 p-4 border border-gray-300 w-fit">
<div class="size-16 transition-[background-color,scale] ease-in delay-100 group-hover:scale-110 group-hover:bg-blue-300 bg-blue-500"></div>
<div class="size-16 transition-[background-color,scale] ease-in delay-200 group-hover:scale-110 group-hover:bg-green-300 bg-green-500"></div>
<div class="size-16 transition-[background-color,scale] ease-in delay-300 group-hover:scale-110 group-hover:bg-red-300 bg-red-500"></div>
</div>
Animaciones
Tailwind viene con una serie de animaciones predefinidas con el prefijo animation-*. Estas animaciones son animate-spin (rotación completa), animate-ping (tamaño y opacidad), animate-pulse (opacidad), y animate-bounce (arriba y abajo).
<div class="flex gap-3">
<div class="size-8 rounded-full animate-ping bg-blue-500"></div>
<div class="size-12 rounded-full animate-bounce bg-green-500"></div>
<div class="size-12 rounded-full animate-pulse bg-red-500"></div>
<div class="size-12 rounded-full animate-spin bg-conic-210 from-white to-amber-600"></div>
</div>
Se pueden definir nuevas animaciones en el tema y asignar nombres para las mismas que luego podemos utilizar fácilmente.
@import "tailwindcss";
@theme {
--animate-wiggle: wiggle 1s ease-in-out infinite;
@keyframes wiggle {
0%,
100% {
transform: rotate(-15deg);
}
50% {
transform: rotate(15deg);
}
}
}