Name The Properties

Reaching for all as the transition property is not a shortcut for the properties you are animating. It is a subscription to every property on that element that is animatable now or becomes animatable later, including the ones someone else adds to the hover state six months from now.

The failure is quiet. Nothing errors, nothing looks broken in review, and the component just develops a slight sogginess that gets blamed on the framework. What actually happened is that a border, a padding or a width joined the transition and started running a layout pass on every frame.

List the properties you mean. Naming two of them is one extra line, and it is the line that stops the third one joining later.

Both buttons end up identical. The difference is that one of them decided on its own to animate a border from zero to two pixels, and since the box is border-box, the label gets squeezed for a quarter of a second every time you point at it.

One duration for everything is the other half

A wildcard also forces one duration and one curve on properties that want different ones. A color wants around 100ms on a plain ease, because it is a state change rather than a movement. A lift wants 150ms on an ease-out. Run the color at the timing of the movement and the button looks like it is thinking about it.

Naming them gets you that for free, because the syntax is already per-property. Two declarations separated by a comma, each with its own duration and curve.

Where it bites hardest

Theme switching. Every element carrying a transition on its colors will animate at its own duration when the theme flips, so the page changes over in waves instead of at once. The fix is to turn transitions off for the moment of the switch rather than to tune them, and next-themes ships that as disableTransitionOnChange.

The other one is a component that renders twice. Anything that mounts with placeholder styles and gets its real ones on a second pass has a style change, and a style change is all a transition needs. With named properties that is one harmless color fade. With a wildcard it is every property that happens to differ between the two renders.

The one case for all

A throwaway prototype where the point is to see the idea move. Even there it is worth knowing you are trading a specific bug later for thirty seconds now, and that the trade rarely stays in the prototype.