The transition-property: which properties can be changed smoothly?

By default, the smooth transition affects all animated element properties. This behavior corresponds to the value all of the transition-property property, and this is the default value.

This behavior is often undesirable, especially when there are many properties in the rule.

You can specify which properties should change smoothly by listing them in the transition-property separated by commas:

transition-property: width;     // Smoothly changes only the width.
transition-property: width, height; // Smoothly changes the width and height.

You can also specify that various properties have different durations for transitions. The values are separated by a comma:

transition-property: width, height;
transition-duration: 1s, 5s; // The width changes for 1 second, and the height changes for 5 seconds.

Let’s try to apply the described property in practice. In this example, the background-color, transform, and font-size properties for the button are animated.