Performance

Transition specificity and GPU compositing hints.

Transition Only What Changes

Never use transition: all or Tailwind's transition-all. Always specify the exact properties that change. Tailwind's bare transition maps to a curated default list of colors, opacity, shadow, and transforms, not to all; still prefer naming exactly what changes.

Why

• transition: all forces the browser to watch every property for changes
• Causes unexpected transitions on properties you didn't intend to animate (colors, padding, shadows)
• Prevents browser optimizations

CSS Example

/* Good — only transition what changes */.button {  transition-property: scale, background-color;  transition-duration: 150ms;  transition-timing-function: ease-out;}
/* Bad — transition everything */.button {  transition: all 150ms ease-out;}

Tailwind

// Good — explicit properties<button className="transition-[scale,background-color] duration-150 ease-out">
// Bad — transition all<button className="transition-all duration-150 ease-out">

Tailwind transition-transform Note

transition-transform in Tailwind maps to transition-property: transform, translate, scale, rotate — it covers all transform-related properties, not just transform. Use this when you're only animating transforms. For multiple non-transform properties, use the bracket syntax: transition-[scale,opacity,filter].

Use will-change Sparingly

will-change hints the browser to pre-promote an element to its own GPU compositing layer. Without it, the browser promotes the element only when the animation starts — that one-time layer promotion can cause a micro-stutter on the first frame.

This particularly helps when an element is changing scale, rotation, or moving around with transform. For other properties, it doesn't help much — the browser can't composite them on the GPU anyway.

Rules

/* Good — specific property that benefits from GPU compositing */.animated-card {  will-change: transform;}
/* Good — multiple compositor-friendly properties */.animated-card {  will-change: transform, opacity;}
/* Bad — never use will-change: all */.animated-card {  will-change: all;}
/* Bad — properties that can't be GPU-composited anyway */.animated-card {  will-change: background-color, padding;}

Useful Properties

When to Skip

Modern browsers are already good at optimizing on their own. Only add will-change when you notice first-frame stutter — Safari in particular benefits from it. Don't add it preemptively to every animated element; each extra compositing layer costs memory.