Animate transform and opacity

Animate transform and opacity, list each property, honor reduce.

Vercel Labsweb-interface-guidelines
Never `transition: all`—list properties explicitly
command.mdView source ↗

From web-design-guidelines, Animation section.

Compositor vs layout

Keep the main thread busy, then press Run.

left + widthBad
transition: left, width
transformGood
transition: transform
Main-thread frames0 frames
.puck { transition: transform 600ms var(--ease-in-out); }
.on .puck { transform: translateX(var(--travel)); }

.fill { transform: scaleX(0); transform-origin: left;
        transition: transform 600ms var(--ease-in-out); }
.on .fill { transform: scaleX(1); }

What transition: all hits

Flip the theme; chips show what actually animated.

transition: allBad
Cancel
none
Explicit listGood
Cancel
none

compositerepaintlayout

.button {
  transition-property: transform, opacity;
  transition-duration: 150ms;
  transition-timing-function: var(--ease-out);
}
.button:active { transform: scale(0.97); }

Reduced motion: fade instead

Toggle reduced motion, then open the sheets.

Ignores the settingBad

Invoice #1042 sent.

translateY(100%)
Honors the settingGood

Invoice #1042 sent.

translateY(100%)
.sheet { transform: translateY(100%); opacity: 1;
         transition: transform 300ms var(--ease-drawer); }
.sheet.open { transform: none; }
.live i { animation: bob 1.2s var(--ease-in-out) infinite; }

@media (prefers-reduced-motion: reduce) {
  .sheet { transform: none; opacity: 0;
           transition: opacity 200ms ease; }
  .sheet.open { opacity: 1; }
  .live i { animation: none; }
}

Why it matters, pros and cons

Why it matters

transform and opacity run on the compositor, beyond the main thread.

Pros

  • Smooth under main-thread load.
  • Siblings never reflow mid-animation.
  • Reduced motion keeps meaning without travel.

Cons

  • scale distorts text; real resizes need FLIP.
  • Every composited layer costs GPU memory.
  • Small color transitions are paint-only and fine.