Should I transition all CSS properties or name only the ones that change?

Usually, name the properties you intend to animate. For example, if a button changes its background and slightly grows when hovered, write transition: background-color 180ms ease, transform 180ms ease; rather than transition: all 180ms ease;.

An explicit list communicates which changes are part of the interaction. With all, any changed property that can transition may get the same transition, including a property someone adds later for another reason. MDN describes all as applying to all properties that change state, while an explicit list limits the transition to named properties. [S1]

There are situations where all is convenient, such as a small component whose changed properties are intentionally treated alike. But convenience is not a reason to assume every future style change should animate.

Suppose a card has a hover effect for transform and box-shadow. Later, someone adds a width change to a state that also affects the card. If the base rule says transition: all 200ms ease, that width change may animate too, even though it was not part of the original hover design. An explicit list keeps the transition tied to the intended effects:

.card {
  transition: transform 200ms ease, box-shadow 200ms ease;
}

The practical point is that naming properties makes the intended behavior clearer and reduces surprises when styles evolve. [S1] For a quick review, compare the properties in the resting and interactive states. If a property changes but should change immediately, leave it out.

No. all is not inherently slow just because the word appears in the declaration. What matters is which properties actually change and what work those changes cause in the rendered page. MDN notes that changes to dimensions, borders, padding, positioning, and other layout-related properties can trigger reflow and repaint, while transforms and opacity are among properties that can avoid those costs. [S2]

So, prefer an explicit list for control, then inspect the properties in that list. Don’t treat transform or opacity as a guarantee of smoothness in every workload, or treat all as proof of a performance problem. Performance on a particular page depends on its actual rendering workload. [S2]

Start with the component’s states, such as its normal and hover states. List only the properties whose change is meant to animate, then choose timing for each. For example, if color should move gently but a small scale change should finish sooner, give the properties separate durations:

.button {
  transition: background-color 220ms ease, transform 140ms ease;
}

MDN supports explicit property lists with per-property timing. It also notes that a later named transition can override an earlier all entry for that property. [S1] That override can be useful, but a direct list is often easier to maintain: readers can see the intended animations without working out which declaration takes precedence.

A reusable rule: use all only when you can explain why every changed, transitionable property should share the effect. Otherwise, name the properties. After editing, compare the relevant states and check that each listed property is intentional. If a property is added later, decide explicitly whether it belongs in the animation.