# Never transition: all

**MUST** · **ID:** `animations-never-transition-all` · **Category:** animations
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/animations-never-transition-all

> MUST: Never transition: all. Explicitly list only the properties you intend to animate (typically opacity, transform)

Explicitly list only the properties you intend to animate

Using transition: all is tempting but dangerous. It can accidentally animate properties you didn't intend to, causing performance issues and unexpected visual effects. Always explicitly list the properties you want to transition.

## Bad — do not do this

`animations-never-transition-all-bad`

```tsx
export function NeverTransitionAllBad() {
  return (
    <div className="space-y-4">
      <p className="text-sm text-muted-foreground">Hover the card — everything crawls, corners and all.</p>
      <button
        type="button"
        className="block w-48 rounded-2xl bg-muted p-6 text-left text-sm font-medium text-foreground hover:-translate-y-1 hover:rounded-md hover:bg-primary hover:text-primary-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
        style={{ transition: 'all 500ms ease' }}
      >
        Hover me
      </button>
      <p className="text-xs text-destructive">
        <code>transition: all</code> animates every changed property — including the corner-radius morph you
        never intended — and the whole thing crawls at 500ms.
      </p>
    </div>
  );
}
```

## Good — do this

`animations-never-transition-all-good`

```tsx
export function NeverTransitionAllGood() {
  return (
    <div className="space-y-4">
      <p className="text-sm text-muted-foreground">Hover the card — the lift and color glide, the corner snaps.</p>
      <button
        type="button"
        className="block w-48 rounded-2xl bg-muted p-6 text-left text-sm font-medium text-foreground hover:-translate-y-1 hover:rounded-md hover:bg-primary hover:text-primary-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
        style={{
          transition:
            'transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background-color 220ms cubic-bezier(0.16, 1, 0.3, 1), color 220ms cubic-bezier(0.16, 1, 0.3, 1)',
        }}
      >
        Hover me
      </button>
      <p className="text-xs text-success">
        Only the listed properties (<code>transform</code>, <code>background-color</code>, <code>color</code>)
        animate. The corner radius isn&apos;t in the list, so it snaps — you control exactly what moves.
      </p>
    </div>
  );
}
```

## References

- [CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Transitions/Using)