¿Qué son las Transitions?

El problema de los cambios bruscos

Imagina que vas conduciendo un auto a 60 km/h y de repente, en un milisegundo, la velocidad cambia a 0. Tu cuerpo no lo agradecería, ¿verdad? En la vida real, las cosas no cambian de estado instantáneamente; existe aceleración, desaceleración y un tiempo de reacción natural.

Sin embargo, en el mundo web, cuando cambias el estilo de un elemento (por ejemplo, el color de fondo de un botón al pasar el cursor), el navegador aplica el nuevo estilo de inmediato. Esto crea un "salto brusco" que puede sentirse mecánico, robótico y poco amigable.

Aquí es donde entran las Transitions

Las CSS Transitions (Transiciones) existen para solucionar este problema. Te permiten cambiar los valores de las propiedades CSS de manera suave a lo largo de una duración determinada. No crean animaciones complejas e independientes como @keyframes, sino que actúan como un "puente" visual entre un estado A (normal) y un estado B (hover, focus, etc.).

El objetivo principal de una transición es mejorar la Experiencia de Usuario (UX). Una interfaz que reacciona suavemente a nuestras acciones nos transmite la sensación de calidad, atención al detalle y naturalidad.

Diferencia entre Animación y Transición

Es común confundir ambas, pero tienen propósitos distintos:

• ✦ Transitions: Conectan dos estados definidos (por ejemplo, estado normal y :hover). Responden a la interacción y solo ocurren cuando una propiedad CSS cambia de valor.
• ✦ Animations (Keyframes): Pueden ejecutarse solas, sin interacción del usuario, pueden tener múltiples pasos intermedios y repetirse infinitamente.