Utilidades de transición

Las transiciones CSS hacen que los cambios de estado sean fluidos y parezcan intencionados en lugar de bruscos. Cuando un botón cambia de color de fondo al pasar el cursor, una barra lateral se desliza o un campo de entrada recibe un anillo de enfoque, las transiciones comunican a los usuarios que algo ha ocurrido y guían su atención. Las utilidades de transición de Tailwind permiten añadir estas animaciones con una sola clase, sin necesidad de CSS personalizado para los casos de uso más habituales.

La utilidad base transition habilita transiciones CSS para las propiedades que se animan con más frecuencia: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform y filter. Normalmente basta con añadir transition a un botón para animar suavemente los cambios de color al pasar el cursor.

Utilice utilidades de transición específicas para animar solo determinadas propiedades. Esto ofrece un mejor rendimiento que transition-all, porque el navegador no necesita recalcular todas las propiedades que podrían animarse en cada fotograma. Tailwind proporciona transition-colors, transition-opacity, transition-shadow, transition-transform y transition-all para distintas necesidades.

transition-all realiza la transición de todas las propiedades CSS que se pueden animar simultáneamente. Aunque resulta práctico, puede provocar comportamientos inesperados; por ejemplo, puede animar propiedades de diseño como height o width cuando solo quería cambiar colores. También ofrece un menor rendimiento porque el navegador controla todas las propiedades. Utilice utilidades de transición específicas siempre que sea posible y recurra a transition-all solo cuando realmente necesite animar juntas varias propiedades no relacionadas.

Las utilidades de transición funcionan habilitando la propiedad CSS transition. Las variantes de estado como hover:, focus: y group-hover: proporcionan los estados inicial y final entre los que se ejecuta la transición. Coloque siempre la clase transition en el elemento base (no dentro de la variante) para que se aplique en ambas direcciones: la transición se ejecuta tanto al entrar como al salir del estado.

Para hacer que los elementos aparezcan y desaparezcan gradualmente, debe realizar una transición de opacity y gestionar también visibility o display. Las transiciones CSS no pueden animar desde ni hasta display: none, por lo que puede utilizar opacity junto con pointer-events-none para efectos sencillos de aparición gradual. Para los elementos que deben desaparecer realmente (y salir del orden de tabulación), combine las transiciones de opacidad con la alternancia de clases mediante JavaScript.

Las transiciones de transformaciones son especialmente fluidas porque se ejecutan en la GPU en lugar de provocar nuevos cálculos de diseño. Las utilidades scale-*, rotate-*, translate-* y skew-* de Tailwind se animan correctamente con transition-transform. Los efectos de escala en tarjetas y botones, los efectos de rotación en iconos y los efectos de deslizamiento en paneles utilizan este enfoque para ofrecer el mejor rendimiento.

Algunos usuarios sufren mareos o convulsiones debido a las animaciones y configuran su sistema operativo para Reducir el movimiento. Tailwind proporciona las variantes motion-reduce: y motion-safe:, que se activan según la consulta de medios prefers-reduced-motion del usuario. Utilice motion-safe: para aplicar animaciones solo cuando el usuario no haya solicitado reducir el movimiento, de modo que sus transiciones sean accesibles de forma predeterminada.

Las transiciones de enfoque son especialmente importantes para la navegación con teclado. Cuando un usuario se desplaza con el tabulador hasta un campo de entrada o un botón, el anillo de enfoque debería aparecer suavemente en lugar de mostrarse de golpe. Aplique transition a todos los elementos interactivos para que la transición del anillo de enfoque resulte tan cuidada como la transición al pasar el cursor. Incluya focus:ring-* y focus:ring-offset-* junto con una transición para ofrecer la mejor experiencia con el teclado.

Puede combinar varias utilidades de transición específicas en un mismo elemento para animar únicamente un conjunto preciso de propiedades. Tailwind las combina mediante la abreviatura CSS transition-property. Apilar transition-colors y transition-shadow en el mismo elemento hace que se animen tanto los colores como las sombras, mientras que otras propiedades, como las transformaciones, cambian de forma instantánea.

A continuación se muestra un enlace de navegación real con todas las transiciones cuidadas: el fondo aparece gradualmente al pasar el cursor, el color del texto cambia al mismo tiempo, el subrayado crece de izquierda a derecha mediante una transformación de escala y los estados de enfoque coinciden exactamente con el estilo al pasar el cursor. Cada interacción resulta intencionada y fluida sin una sola línea de CSS personalizado.

En esta lección ha aprendido que la utilidad base transition permite animar suavemente propiedades habituales; que las utilidades de transición específicas, como transition-colors y transition-transform, ofrecen un mejor rendimiento que transition-all; y que la variante motion-safe: garantiza que las animaciones solo se apliquen cuando el usuario no haya solicitado reducir el movimiento. A continuación controlaremos la duración de las transiciones y las funciones de temporización.