Propiedades animables

No todas las propiedades se animan igual

Hay dos maneras de mover un elemento de izquierda a derecha: cambiar su propiedad left de 0 a 200px, o usar transform: translateX(200px). A simple vista, el resultado parece idéntico. Pero debajo del capó, ocurre algo radicalmente diferente, y esa diferencia determina si tu animación corre suave a 60fps o tartamudea en el teléfono de un usuario.

Entender qué propiedades animar —y cuáles evitar— es uno de los conocimientos más valiosos de este capítulo. No es teoría académica: es la diferencia entre una interfaz fluida y una que frustra al usuario en el momento más crítico.

El pipeline que el navegador ejecuta en cada cambio

Cuando una propiedad CSS cambia, el navegador pasa por hasta tres etapas para reflejar ese cambio en pantalla. Cada etapa tiene un costo diferente:

1. Layout (Reflow): Recalcula el tamaño y posición de todos los elementos de la página. Animar width, height, top, left o margin lo dispara. El más costoso.
2. Paint: Redibuja los píxeles de los elementos afectados. Animar color, background-color o box-shadow activa esta etapa. Moderado.
3. Composite: Solo combina capas ya pintadas. Únicamente transform y opacity llegan aquí sin activar etapas anteriores. Ultrarrápido — la GPU lo maneja directamente.

Las propiedades que siempre debes preferir

Propiedades animables populares

• ✦ opacity: Controla la opacidad del elemento (0 a 1) y es sumamente eficiente en rendimiento.
• ✦ transform: Permite escalar, rotar, trasladar o inclinar. Es la propiedad reina de la aceleración por hardware.
• ✦ color & background-color: Cambios de color interpolados mediante transiciones cromáticas en el canal RGB/HSL.
• ✦ width & height: Modifican las dimensiones físicas, pero tienen un costo de rendimiento alto.
• ✦ top, left, bottom, right: Modifican la posición física del elemento si está posicionado. Al igual que el ancho/alto, activan el ciclo de layout del navegador.

¿Cuáles NO son animables?

Propiedades cuyos valores cambian abruptamente de un estado discreto a otro no se pueden interpolar.

• display: No se puede animar entre none y block. Si quieres desvanecer un elemento, anima su opacity y luego usa JavaScript, u otras técnicas modernas como @starting-style (en navegadores compatibles).
• font-family: No hay término medio lógico entre Arial y Times New Roman.

Rendimiento y el pipeline de renderizado

El navegador pasa por tres etapas principales para renderizar un cambio en pantalla:

1. Layout (Reflow): Calcula el tamaño y posición de todos los elementos. Animar width, height, top, left o margin obliga al navegador a recalcular toda la página. ¡Evítalo!
2. Paint: Dibuja los píxeles de los elementos en capas individuales. Animar color, background-color o box-shadow activa este paso.
3. Composite: Combina las capas de la página. Animar transform u opacity solo activa la composición, que es ejecutada directamente por la tarjeta gráfica (GPU). ¡Es ultra rápido!