The transition-duration property

Smooth CSS transitions allow you to change property values gradually or “smoothly.”

Usually, the effect from changing the values of CSS properties can be seen instantly, but thanks to smooth transitions, you can change this behavior and significantly draw out the value change process.

Unlike animations that allow you to manage any number of intermediate states, when you use transitions you can only manage the transition between two states: initial and final.

To configure a smooth transition in CSS, you need to set one property: transition-duration. You can specify the values in seconds (10s, 3s), fractions of a second (0.1s, 0.03s), or milliseconds (100ms, 333ms).

Let’s consider how a smooth transition works using the simple example of a button that changes color when pressed. The initial state is described in the .btn class, and the final state is specified in the .btn-active class.

The btn-active class in this and the following tasks is added to the button when pressed using JavaScript.