1# Performance
2 
3Transition specificity and GPU compositing hints.
4 
5## Transition Only What Changes
6 
7Never use `transition: all` or Tailwind's `transition` shorthand (which maps to `transition-property: all`). Always specify the exact properties that change.
8 
9### Why
10 
11- `transition: all` forces the browser to watch every property for changes
12- Causes unexpected transitions on properties you didn't intend to animate (colors, padding, shadows)
13- Prevents browser optimizations
14 
15### CSS Example
16 
17```css
18/* Good — only transition what changes */
19.button {
20  transition-property: scale, background-color;
21  transition-duration: 150ms;
22  transition-timing-function: ease-out;
23}
24 
25/* Bad — transition everything */
26.button {
27  transition: all 150ms ease-out;
28}
29```
30 
31### Tailwind
32 
33```tsx
34// Good — explicit properties
35<button className="transition-[scale,background-color] duration-150 ease-out">
36 
37// Bad — transition all
38<button className="transition duration-150 ease-out">
39```
40 
41### Tailwind `transition-transform` Note
42 
43`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]`.
44 
45## Use `will-change` Sparingly
46 
47`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.
48 
49This 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.
50 
51### Rules
52 
53```css
54/* Good — specific property that benefits from GPU compositing */
55.animated-card {
56  will-change: transform;
57}
58 
59/* Good — multiple compositor-friendly properties */
60.animated-card {
61  will-change: transform, opacity;
62}
63 
64/* Bad — never use will-change: all */
65.animated-card {
66  will-change: all;
67}
68 
69/* Bad — properties that can't be GPU-composited anyway */
70.animated-card {
71  will-change: background-color, padding;
72}
73```
74 
75### Useful Properties
76 
77| Property | GPU-compositable | Worth using `will-change` |
78| --- | --- | --- |
79| `transform` | Yes | Yes |
80| `opacity` | Yes | Yes |
81| `filter` (blur, brightness) | Yes | Yes |
82| `clip-path` | Yes | Yes |
83| `top`, `left`, `width`, `height` | No | No |
84| `background`, `border`, `color` | No | No |
85 
86### When to Skip
87 
88Modern 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.
89