# Never transition-all

**NEVER** · **ID:** `performance-no-transition-all` · **Category:** performance
**Source:** [Tailwind](https://tailwindcss.com/docs)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/performance-no-transition-all

> NEVER: Use transition-all; explicitly specify transition-transform, transition-opacity, etc.

Explicitly transition only needed properties

transition-all animates every CSS property that changes, including layout-triggering properties you didn't intend to animate. This causes unexpected animations, performance issues, and harder debugging.

## Bad — do not do this

`performance-no-transition-all-bad`

```tsx
export function NoTransitionAllBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="flex gap-4 justify-center">
        <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:scale-105 hover:bg-primary/90 transition-all duration-200">
          transition-all
        </button>
        <button className="px-4 py-2 border-2 border-primary text-primary rounded-lg hover:border-secondary hover:text-secondary transition-all duration-200">
          transition-all
        </button>
      </div>
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-2">Problems with transition-all</h4>
        <ul className="text-sm text-muted-foreground space-y-1">
          <li className="flex items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-error" />
            Animates unintended properties
          </li>
          <li className="flex items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-error" />
            May animate layout properties
          </li>
          <li className="flex items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-error" />
            Unpredictable visual results
          </li>
          <li className="flex items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-error" />
            Harder to debug transitions
          </li>
        </ul>
      </div>
      <p className="text-xs text-error">
        transition-all causes unexpected animations and performance issues
      </p>
    </div>
  );
}
```

## Good — do this

`performance-no-transition-all-good`

```tsx
export function NoTransitionAllGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="flex gap-4 justify-center">
        <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:scale-105 transition-transform duration-200">
          Scale only
        </button>
        <button className="px-4 py-2 bg-secondary text-secondary-foreground rounded-lg hover:opacity-80 transition-opacity duration-200">
          Opacity only
        </button>
      </div>
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-2">Explicit Transitions</h4>
        <div className="space-y-2 text-sm">
          <div className="flex items-center gap-2">
            <code className="text-xs bg-muted px-1 rounded">transition-transform</code>
            <span className="text-muted-foreground">- scale, rotate, translate</span>
          </div>
          <div className="flex items-center gap-2">
            <code className="text-xs bg-muted px-1 rounded">transition-opacity</code>
            <span className="text-muted-foreground">- fade effects</span>
          </div>
          <div className="flex items-center gap-2">
            <code className="text-xs bg-muted px-1 rounded">transition-colors</code>
            <span className="text-muted-foreground">- color changes</span>
          </div>
        </div>
      </div>
      <p className="text-xs text-success">
        Explicit transitions are predictable and performant
      </p>
    </div>
  );
}
```

## References

- [CSS Transition Property](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition-property)