1 <p>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.</p>

2 <p>This behavior is often undesirable, especially when there are many properties in the rule.</p>

3 <p>You can specify which properties should change smoothly by listing them in the transition-property separated by commas:</p>

4 transition-property: width; // Smoothly changes only the width. transition-property: width, height; // Smoothly changes the width and height.<p>You can also specify that various properties have different durations for transitions. The values are separated by a comma:</p>

5 transition-property: width, height; transition-duration: 1s, 5s; // The width changes for 1 second, and the height changes for 5 seconds.<p>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.</p>