Transition Duration

We use the transition-duration property to specify the time during which the transition should occur. This property is expressed in seconds (e.g., 3s or 0.45s) or milliseconds (e.g., 3000ms or 450ms). When the duration of a transition is not explicitly defined, the change happens instantaneously.

Let's run the following example to see what behaviors we can get. Please, hover over the container, and the transition will start for all elements. The difference is in the duration of the transition.