La regla de oro del rendimiento: transform y opacity

Dos animaciones idénticas a la vista: una corre sedosa a 60fps en cualquier celular; la otra tartamudea en gama media y calienta el teléfono. La diferencia no está en los keyframes — está en QUÉ propiedad animan. Esta es la lección de ingeniería del módulo: por qué transform y opacity son especiales, y qué hacer con will-change (spoiler: casi nada).

La cocina del navegador

El pipeline, en términos de propiedades

De aquí sale la regla de oro: en animaciones y transiciones, anima transform y opacity; el resto, solo con una razón y midiendo. Y de paso entiendes decisiones que este curso venía tomando "por fe": la tarjeta flota con translateY, no con margin-top (módulo 10, lección 1); el atenuado de la galería usa opacity; el pulso escala con scale.

Lo mejor: casi todo lo que se anima con propiedades caras tiene traducción barata —

Nota honesta: hay animaciones que NO tienen traducción (el acordeón que empuja el contenido de abajo sí necesita cambiar altura). Ahí la respuesta no es prohibición sino consciencia: hazla corta, en un elemento contenido, y mídela. La regla de oro cubre el 90%; el otro 10% se decide con datos, no con dogma.

Cómo VER la diferencia (no me creas: mídelo)

DevTools trae el detector exacto:

1. Abre DevTools → menú de tres puntos → More tools → Rendering.
2. Activa Paint flashing: todo lo que se repinta parpadea en verde. Anima un box-shadow y verás la lluvia verde por fotograma; anímalo con opacity sobre un pseudo-elemento y... silencio.
3. En la pestaña Performance, graba 3 segundos de tu animación: los fotogramas que pasan de 16.6ms son los que el usuario siente como tirón.

Ese umbral — 16.6 milisegundos — es la aritmética de los 60fps: 1000ms ÷ 60 fotogramas. TODO el trabajo de un fotograma (tu CSS, el layout, el paint) debe caber ahí. transform y opacity dejan casi todo el presupuesto libre.

will-change: la reserva de mesa

will-change: transform le avisa al navegador "este elemento va a animarse — prepárale una capa en la GPU desde ya". Suena a botón de turbo; es una reserva de mesa: útil si de verdad vas a ir, un desperdicio de memoria si reservas todas las mesas del restaurante "por si acaso". Cada capa promovida ocupa RAM de la GPU — y en móviles esa memoria es escasa.

Criterio profesional en tres líneas: primero escribe la animación con la regla de oro; si tartamudea (medido en Performance, no en sensaciones), revisa que no estés animando propiedades caras; y solo si el problema es el ARRANQUE de una animación compleja (el primer fotograma de un flip 3D, por ejemplo), prueba will-change en ESE elemento. En este curso lo usarás... casi nunca. Saber cuándo NO usar una herramienta también es dominarla.

Mini-reto

Auditoría con lupa verde: abre "El Observador", activa Paint flashing y recorre tus hovers y animaciones uno por uno. Meta: que tus transiciones de transform/opacity no enciendan flashes (¡las de sombra sí van a encenderlos — decide si alguna vale la pena rediseñar!). Cierra con la pestaña Performance grabando tu pulso de "EN VIVO" y busca el ritmo estable de fotogramas.

Qué sigue

Una animación sola ya corre a 60fps. Ahora vienen MUCHAS a la vez, en cadena: títulos que entran uno tras otro, listas que se despliegan en cascada. El truco tiene nombre — staggering — y dos ingredientes que ya tienes: animation-delay y variables CSS.