Performance
Transition specificity and GPU compositing hints.
Transition Only What Changes
Never use transition: all or Tailwind's transition shorthand (which maps to transition-property: all). Always specify the exact properties that change.
Why
transition: allforces 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 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
| Property | GPU-compositable | Worth using will-change |
|---|---|---|
transform | Yes | Yes |
opacity | Yes | Yes |
filter (blur, brightness) | Yes | Yes |
clip-path | Yes | Yes |
top, left, width, height | No | No |
background, border, color | No | No |
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.