🎞️ Animaciones en Tailwind CSS

Tailwind incluye utilidades para animaciones predefinidas mediante la clase animate-*. Puedes controlar la duración, repetición, y estilo con otras clases como duration-*, delay-* y ease-*. También puedes crear tus propias animaciones personalizadas en el archivo tailwind.config.js utilizando la clave theme.extend.animation.

🔹 Clases animate-*

Clase Tailwind Equivalente CSS Descripción Ejemplo
animate-none animation: none; Desactiva cualquier animación aplicada al elemento.
Sin animación
animate-spin 
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
animation: spin 1s linear infinite;
 Gira el elemento indefinidamente.
🔄
animate-ping 
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
 Crea un efecto de expansión con opacidad como un radar.
📡
animate-pulse 
@keyframes pulse {
  50% {
    opacity: .5;
  }
}
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 Reduce y aumenta la opacidad como un pulso.
❤️
animate-bounce 
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
animation: bounce 1s infinite;
 Hace que el elemento rebote suavemente.
🏀

Si deseas crear animaciones personalizadas como animate-fade-in o animate-slide-up, puedes definirlas en tailwind.config.js usando theme.extend.animation y combinarlas con @keyframes personalizadas.