To control how CSS transitions behave, you need to understand three essential properties: transition-duration, transition-timing-function, and transition-delay. These properties allow you to adjust how quickly a transition runs, the pace or rhythm of the transition, and when the transition should begin.

The transition-duration Property

Sets how long the transition takes to complete, measured in seconds (s) or milliseconds (ms). A longer duration makes the transition appear slower, while a shorter duration makes it seem faster.

The transition-timing-function Property

Defines the speed curve of the transition. This determines whether the transition starts slow and speeds up, remains constant, or has another pacing. Common values include:

• ease: starts slow, speeds up, then slows down again;
• linear: moves at a constant speed throughout;
• ease-in: starts slowly and then speeds up;
• ease-out: starts quickly and slows down at the end;
• ease-in-out: starts and ends slowly, with a faster middle section.

The transition-delay Property

Sets how long to wait before the transition begins after the trigger event, such as hovering over an element.

In this example, each box demonstrates a different transition property in action. When you hover over the Duration box, the background color takes two seconds to change because its transition-duration is set to 2s. This makes the color shift appear smooth and gradual.

The Timing box uses a transition-timing-function of linear, so the background color change happens at a constant speed over one second. This creates a steady, even effect from start to finish, unlike the default ease which would accelerate and decelerate.

The Delay box has a transition-delay of one second. When you hover over it, there is a one second pause before the background color begins to change, and then the transition completes in one second.

Changing these properties can dramatically alter the feel of your interface. A longer duration can make transitions feel more relaxed, while a short duration adds snappiness. Adjusting the timing function can create a playful or professional impression, and adding a delay can help sequence animations or draw attention to specific interactions.