CSS transition-delay

The transition-delay property in CSS specifies a delay for the transition effect. It determines how long the transition will wait before starting.

Here is the syntax for the transition-delay property:


selector {
  transition-property: property;
  transition-duration: time;
  transition-timing-function: timing-function;
  transition-delay: time;
}

The value of time can be specified in seconds or milliseconds.

Let's see an example to understand how transition-delay works:

Result:

In the above example, when you hover over the red box, it will smoothly transition to a wider width over a period of 2 seconds with a delay of 1 second before starting the transition.