Animaciones en Tailwind: clases integradas y keyframes propios
Guía de animaciones en Tailwind
Animaciones en Tailwind: clases integradas y keyframes propios | We.Inc
Mira animate-spin, ping, pulse y bounce en acción con su CSS exacto y luego añade keyframes propios en Tailwind v4 con @theme, usando un generador de keyframes y consejos sobre movimiento reducido.
Tailwind incluye cuatro animaciones listas: animate-spin para indicadores de carga, animate-ping para puntos de notificación, animate-pulse para pantallas esqueleto y animate-bounce para invitar a desplazarse, además de animate-none para detenerlas. En v4 añades las tuyas declarando una variable --animate-name y sus @keyframes dentro de @theme, lo que crea una clase animate-name.
Utilidades de animación integradas en Tailwind v4
Clase
Valor
Uso típico
spin 1s linear infinite
Indicadores de carga giratorios
ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
Insignias de en directo o no leído
pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
Marcadores esqueleto
bounce 1s infinite
Flechas para desplazarse hacia abajo
animation: none
Desactivar una animación en un breakpoint o estado
Todas las animaciones integradas de abajo están funcionando en vivo, junto a los keyframes que Tailwind genera para ellas. Después crea una propia: elige el movimiento, la duración y el número de repeticiones, y copia un bloque @theme listo para Tailwind v4, o la configuración equivalente para proyectos antiguos en v3.
Observa las cuatro animaciones integradas y copia la clase que necesites.
Activa la vista previa de movimiento reducido para ver qué hacen motion-safe y motion-reduce.
Usa el generador de keyframes para elegir movimiento, duración, easing y número de repeticiones.
Pega el bloque @theme generado en el archivo CSS que importa Tailwind y luego usa la nueva clase.
Envuelve el movimiento decorativo en motion-safe: para que quienes piden a su sistema menos movimiento no lo reciban.
Anima transform y opacity. Animar width, height o top obliga a recalcular la maquetación en cada fotograma.
Usa animate-[name_duration_easing] para un valor puntual; los guiones bajos sustituyen a los espacios dentro de los corchetes.
Para hover y cambios de estado, una utilidad de transición suele ser mejor que una animación con keyframes.
Mantén cortas las animaciones de entrada, entre 150 y 300 milisegundos, para que la página nunca parezca lenta.
Preguntas frecuentes
¿Cómo añado una animación personalizada en Tailwind v4?
Dentro de @theme en tu archivo CSS principal, declara --animate-wiggle: wiggle 1s ease-in-out infinite; y pon la regla @keyframes wiggle en el mismo bloque @theme. Tailwind genera entonces una clase animate-wiggle que puedes usar en cualquier parte.
¿Dónde quedaron los keyframes de tailwind.config.js en v4?
v4 se configura en CSS, así que theme.extend.keyframes y theme.extend.animation pasan a ser @keyframes y variables --animate-* dentro de @theme. Una configuración en JavaScript sigue funcionando si la cargas con la directiva @config, lo que ayuda durante una migración.
¿Cómo hago que una animación se ejecute una sola vez?
Quita infinite del valor y añade forwards si el elemento debe quedarse en el último fotograma, por ejemplo --animate-fade-in: fade-in 0.3s ease-out forwards. Para un caso puntual también puedes escribir animate-[fade-in_0.3s_ease-out_forwards].
¿Respeta Tailwind automáticamente la configuración de movimiento reducido?
No. Las variantes motion-safe: y motion-reduce: corresponden a la media query prefers-reduced-motion, pero tienes que aplicarlas tú. Un patrón habitual es motion-safe:animate-bounce, que solo anima para quienes no han pedido movimiento reducido.
Para qué sirve cada animación integrada
Spin gira un elemento una vuelta completa cada segundo y encaja con los indicadores de carga circulares. Ping escala una copia de un punto hasta el doble de su tamaño mientras la desvanece, lo que se percibe como un pulso de radar; ponlo en un span con posición absoluta detrás de un punto sólido.
Pulse baja la opacidad a la mitad y la recupera en dos segundos, el aspecto estándar de los bloques esqueleto grises mientras carga el contenido. Bounce eleva un elemento una cuarta parte de su altura y lo deja caer, lo que funciona para una única flecha que invita a desplazarse, y rara vez en otro sitio.
Keyframes propios en v4
Tailwind v4 trasladó la configuración al CSS. Cualquier variable del espacio de nombres --animate-* dentro de @theme se convierte en una utilidad animate-*, y los @keyframes escritos dentro del mismo bloque se emiten junto a ella. No hace falta registrar nada más.
Mantén idénticos el nombre de la variable y el nombre de @keyframes. Si no coinciden, obtienes una clase que define una animación que apunta a unos keyframes que no existen, así que nada se mueve y no aparece ningún error.
Movimiento y accesibilidad
Los movimientos grandes, repetitivos o de parallax pueden hacer que algunas personas se sientan mal. Los sistemas operativos ofrecen un ajuste para reducir el movimiento, y los navegadores lo pasan al CSS como prefers-reduced-motion.
Los indicadores de carga que comunican un estado pueden conservar una versión suave, mientras que los rebotes decorativos y los reclamos de atención deben detenerse. Prueba con el ajuste activado, o con la opción de emulación de las herramientas para desarrolladores de tu navegador.
El CSS detrás de las clases integradas
Keyframes que genera Tailwind v4
Cada clase animate-* asigna a animation una variable del tema; estos son los valores y keyframes por defecto.
Animaciones personalizadas en v4 y v3
Tailwind v4: @theme en tu CSS
Esto crea animate-wiggle y animate-fade-up. Úsalas como nombres de clase de inmediato.
La configuración antigua en JavaScript, para proyectos que aún no se han pasado a v4.
Usarlas en el marcado
Valores arbitrarios, una referencia a una variable y motion-safe para que el movimiento respete el ajuste del sistema.
Keyframes propios funcionando en vivo
Wiggle, fade up y una tarjeta esqueleto
Equivalentes en CSS puro de las clases personalizadas de arriba, para que puedas editar la duración y ver cómo cambia.
Las animaciones integradas, en vivo
Cada vista previa usa la clase real de Tailwind. Activa la vista previa de movimiento reducido para ver motion-safe en acción.
Vista previa de movimiento reducido: activada
Vista previa de movimiento reducido: desactivada
Generador de keyframes
Elige movimiento, duración, easing y número de repeticiones, y copia el bloque @theme para Tailwind v4.