Cómo se dibuja un cuadro

Cada vez que algo cambia, el navegador arma un cuadro nuevo en cuatro pasos:

1. EstilostyleDecide qué reglas aplican a cada elemento.
2. LayoutlayoutCalcula el tamaño y la posición de cada caja. Si una caja cambia de tamaño, puede mover a sus vecinas, y a las vecinas de ellas.
3. PinturapaintRellena píxeles: texto, colores, bordes, sombras.
4. ComposicióncompositeJunta las capas ya pintadas y las ubica en pantalla.

Un cambio entra en el primer paso que lo afecta y arrastra todos los siguientes. Las propiedades de geometría (width, height, top, margin, padding, font-size) disparan layout. Las de aspecto (color, background-color, box-shadow) solo pintura. transform y opacity se resuelven en la composición.

Abrí el panel con cada técnica. Con width, el párrafo se reacomoda en cada cuadro: la línea naranja mide su ancho y el contador dice en cuántos cuadros cambió. Con transform u opacity el párrafo no se entera. La cámara lenta ayuda a ver el texto saltando de línea.

.ingredientes {
  width: 0;
  overflow: hidden;
  transition: width 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ingredientes.abierto {
  width: 10rem;
  transition-duration: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  .ingredientes {
    transition-duration: 0s;
  }
}

<aside data-open class="w-0 overflow-hidden data-open:w-40 transition-[width] ease-[cubic-bezier(0.22,1,0.36,1)] duration-350 data-open:duration-400 motion-reduce:transition-none">
  …ingredientes
</aside>

Los pasos de cada propiedad dependen del motor; la tabla de arriba sigue a Chromium. Para verlo en tu página, el panel Performance de las herramientas de desarrollo marca cada cuadro con sus pasos.

Animar transform y opacity

Con una pantalla de 60 cuadros por segundo, cada cuadro tiene unos 16 milisegundos. Una animación que solo toca transform u opacity puede correr en el compositor, fuera del hilo principal: sigue fluida aunque JavaScript esté ocupado. Para casi cualquier movimiento hay un reemplazo:

1. MovertranslateEn lugar de left o top.
2. AgrandarscaleEn lugar de width y height.
3. ApareceropacityEn lugar de visibility o display a secas.

1/* cada cuadro recalcula el layout */
2.toast { transition: top 250ms; }
3
4/* cada cuadro solo compone */
5.toast {
6  transition:
7    translate 250ms cubic-bezier(0.22, 1, 0.36, 1),
8    opacity 250ms ease-in-out;
9}
10
11@media (prefers-reduced-motion: reduce) {
12  /* sin movimiento, el fundido queda */
13  .toast { transition-property: opacity; }
14}

translate, scale y rotate son propiedades sueltas que funcionan igual que transform. Son Baseline ampliamente disponible (Chrome 104, Firefox 72, Safari 14.1).

will-change, con cuidado

will-change: transform avisa que un elemento va a animarse, y el navegador lo sube a su propia capa antes de empezar. Así el primer cuadro no tiene que pintarlo de cero. Cada capa ocupa memoria de video: si se lo ponés a cien elementos, o a *, la página se pone más lenta, no más rápida.

1. Usalo en lo que se anima seguido, o agregalo justo antes (al pasar el puntero por el padre) y sacalo al terminar.
2. Tiene efectos visibles: con transform u opacity crea un contexto de apilamiento, igual que si la propiedad ya estuviera puesta.
3. No lo agregues por las dudas. Si una animación anda bien sin él, no hace falta.

1.galeria:hover .foto {
2  will-change: transform; /* se prepara mientras el puntero está cerca */
3}

will-change es Baseline ampliamente disponible (Chrome 36, Firefox 36, Safari 9.1).

contain

contain le promete al navegador que un elemento está aislado del resto. Con esa promesa, un cambio adentro no obliga a recalcular la página entera. Cada valor es una promesa distinta:

1. layoutLo de adentro no afecta el layout de afuera. El elemento pasa a ser el bloque contenedor de sus hijos con position: absolute o fixed.
2. paintNada se pinta fuera de su caja; recorta como overflow: hidden, y si queda fuera de pantalla no se pinta.
3. sizeSu tamaño no depende de los hijos. Sin un tamaño explícito colapsa a 0. inline-size hace lo mismo solo con el ancho: es lo que usan las container queries.
4. content · strictcontent = layout paint style, el atajo seguro. strict = size layout paint style, solo si le das tamaño.

1.widget-del-clima {
2  contain: content; /* lo que pase adentro, queda adentro */
3}

contain es Baseline ampliamente disponible (Chrome 52, Firefox 69, Safari 15.4); el valor inline-size llegó después (Chrome 105, Firefox 101, Safari 16) y también es ampliamente disponible.

content-visibility

content-visibility: auto va un paso más allá: el navegador saltea el layout y la pintura de lo que está lejos de la pantalla, y lo dibuja cuando se acerca. El contenido sigue en el DOM: lo encuentra la búsqueda del navegador, lo leen los lectores de pantalla y los enlaces internos llegan.

Mientras está salteado, el bloque no tiene tamaño. contain-intrinsic-size le da uno de reemplazo, para que la barra de scroll no salte. Con auto delante, el navegador recuerda el tamaño real la primera vez que lo dibuja y usa ese.

El horario de abajo tiene un bloque por hora. La tira de la derecha marca en naranja los bloques que el navegador está dibujando. Bajá por la lista y mirá cómo cambian. Después probá none: los bloques salteados miden 0 y el alto del scroll se achica.

.hora {
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
}

<section class="[content-visibility:auto] [contain-intrinsic-size:auto_220px]">…</section>

content-visibility: auto es Baseline recién disponible desde septiembre de 2025 (Chrome 85, Firefox 125, Safari 26). Un navegador sin soporte ignora la regla y dibuja todo, como siempre: se puede usar sin respaldo. contain-intrinsic-size es Baseline ampliamente disponible (Chrome 83, Firefox 107, Safari 17).

Sombras y desenfoques grandes

La pintura cuesta según el área y el radio. Un filter: blur(40px) sobre una foto grande, o un box-shadow de 60px de desenfoque, tienen que recalcular muchos píxeles. Una vez está bien; en cada cuadro de una animación, no. backdrop-filter además se vuelve a pintar cada vez que cambia lo que hay detrás, por ejemplo al hacer scroll.

Para animar una sombra, pintala una sola vez en un pseudo-elemento y animá su opacidad:

1.tarjeta { position: relative; }
2
3.tarjeta::after {
4  content: "";
5  position: absolute;
6  inset: 0;
7  border-radius: inherit;
8  box-shadow: 0 12px 32px oklch(0 0 0 / 18%);
9  opacity: 0;
10  transition: opacity 200ms ease-in-out;
11}
12
13.tarjeta:hover::after { opacity: 1; }

Layout en cada cuadro

Una animación de CSS que toca geometría recalcula el layout en cada cuadro, y si el elemento está en el flujo, mueve todo lo que tiene alrededor. Pasa igual con @keyframes: animar height de 0 a auto, margin o left tiene el costo del panel de arriba con width.

1/* layout en cada cuadro, y empuja a los vecinos */
2@keyframes crecer-ancho { from { width: 40px; } to { width: 48px; } }
3
4/* solo composición, y no mueve a nadie */
5@keyframes crecer { from { scale: 1; } to { scale: 1.2; } }

En JavaScript el problema se llama layout thrashing: escribir un estilo y enseguida leer una medida (offsetHeight, getBoundingClientRect()) obliga al navegador a hacer el layout en el momento. En un bucle, eso pasa una vez por elemento. Primero leé todas las medidas y después escribí todos los estilos.

En Tailwind

Tailwind tiene clases para la transición y para will-change y contain. content-visibility y contain-intrinsic-size no tienen clase: van como propiedades arbitrarias.

1<section class="[content-visibility:auto]
2                [contain-intrinsic-size:auto_220px]">
3  …
4</section>
5
6<aside class="translate-x-full transition-transform duration-350
7              data-open:translate-x-0 data-open:duration-400
8              motion-reduce:transition-none">
9  …
10</aside>