Back in 2013, CSS transitions showed up and changed the game. They gave us a super simple way to add motion to our interfaces without diving into JavaScript. They’re great when used right. But if you’re writing transition: all, you’re asking for trouble.

Let’s talk about why.

What all Really Means

When you do this:

transition: all 0.3s ease;

You’re basically telling the browser, “Animate every property that changes.” That’s everything from big layout shifters like width and margin, to paint-heavy stuff like box-shadow and color, to smooth GPU-powered ones like transform and opacity.

Sounds handy, but it’s not.

Why It’s a Bad Idea

1. Weird Surprises When you don’t list properties, you don’t control what animates. Add a new style later and it might start animating when you never planned it to. Suddenly your layout jumps or something flickers and you’re left wondering why.

2. Performance Hits Some CSS properties are expensive to animate. They force the browser to recalculate layouts or repaint big chunks of the page. That’s work the browser has to do over and over during the animation, which can make things choppy.

Here’s the deal:

• width, height, margin, padding → layout recalculations
• color, box-shadow, background-color → paint work
• transform, opacity → smooth and GPU-friendly

When you use all, the browser has to be ready to animate anything. That’s extra overhead you don’t need.

3. Harder to Debug If something animates and you didn’t mean it to, tracking down the cause is a pain when all is involved. Being specific makes it obvious what’s happening and why.

The Better Way

Instead of:

transition: all 0.3s ease;

Be clear about what you want to animate:

transition:
  transform 0.3s ease,
  opacity 0.3s ease;

This way you’re only animating properties that are safe, smooth, and intentional. Your code stays readable, your UI stays snappy, and you avoid mystery glitches.

Bottom Line

We all know that transition: all is tempting, but it’s vague, inefficient, and unpredictable. Pick the properties you want to animate and stick to GPU-friendly ones like transform and opacity. Your animations will look better, feel faster, and be much easier to maintain.