Una transición en CSS es un cambio gradual entre dos estados visuales durante un tiempo determinado.
Hasta ahora, cuando pasábamos el ratón por encima de un botón y activábamos la pseudo-clase :hover, el cambio de color u opacidad ocurría en cero milisegundos. Ese salto tan resulta un poco tosco a la vista.
La propiedad transition nos permite indicarle al navegador que, en lugar de saltar del punto A al punto B instantáneamente, calcule los pasos intermedios y dibuje una animación suave.
La sintaxis de la transición
La propiedad transition es, en realidad, una forma abreviada de escribir varias sub-propiedades en una sola línea. Para que funcione correctamente, necesitamos pasarle tres datos fundamentales al navegador.
.boton-suave {
background-color: blue;
color: white;
/* Propiedad a animar | Duración | Curva de aceleración */
transition: background-color 0.3s ease;
}
.boton-suave:hover {
background-color: darkblue; /* El estado final que queremos alcanzar */
}
Vamos a destripar esos tres componentes que hemos puesto en la regla para entender qué hacen exactamente.
Qué queremos animar (transition-property)
El primer valor indica qué característica exacta va a sufrir el cambio progresivo. En nuestro ejemplo hemos puesto background-color, por lo que el color de fondo mutará lentamente.
Podéis animar el ancho (width), la posición, el color del texto, y casi cualquier propiedad numérica. Si queréis animarlo absolutamente todo a la vez, podéis usar la palabra clave all (aunque es mejor ser específicos para que el navegador no trabaje de más calculando cosas innecesarias).
Cuánto va a tardar (transition-duration)
El segundo valor es el tiempo total que tardará en completarse el efecto. Se puede expresar en milisegundos (ms) o, más comúnmente, en fracciones de segundo (s).
Para elementos de la interfaz de usuario (como botones o enlaces), el estándar de la industria suele estar entre 0.2s y 0.3s. Si lo ponéis más lento, el usuario se desesperará esperando a que el botón termine de iluminarse. La interfaz debe sentirse rápida y ágil.
Cómo se va a mover (transition-timing-function)
El último valor define la curva de aceleración de la animación. No todos los movimientos en el mundo real son constantes y lineales, y en la web pasa lo mismo.
- linear: El cambio ocurre a una velocidad constante de principio a fin (es muy robótico).
- ease: Es el valor por defecto. Empieza despacio, acelera en el medio y frena suavemente al final. Imita muy bien la inercia del mundo real y es el que usaréis casi siempre.
- ease-in: Empieza muy lento y coge velocidad al final (ideal para objetos que se caen).
- ease-out: Empieza rápido y frena poco a poco al final (ideal para cosas que entran en pantalla y se detienen).
El retardo (transition-delay)
Es un parámetro opcional al final de la declaración. Le indica al navegador cuántos segundos debe esperar antes de empezar a calcular la transición. Es extremadamente útil para crear animaciones en cascada (por ejemplo, que los elementos de una lista vayan apareciendo uno detrás de otro con un desfase de 0.1s).
Disclaimer rendimiento La aceleración por Hardware
Al añadir transiciones, estamos obligando a la CPU del usuario a calcular docenas de fotogramas por segundo. Si no tenéis cuidado, vuestra web irá a tirones (el temido jank), especialmente en teléfonos móviles de gama baja.
No animéis propiedades que alteren el Modelo de Caja geométrico (como width, height, margin, padding, top o left). Animar un width obliga al navegador a recalcular la posición de todos los elementos vecinos en la pantalla 60 veces por segundo (un proceso carísimo llamado Reflow).
Para conseguir animaciones fluidas, priorizad transform (escalar, mover, rotar) y opacity. Suelen ser las propiedades más baratas de animar, porque el navegador puede componerlas sin recalcular todo el layout.
