transition-delay

The transition-delay property, normally used as part of transition shorthand, is used to define a length of time to delay the start of a transition.

.example {
    transition-delay: 5s;
}

The value can be one of the following:

• A valid time value (defined in seconds or milliseconds)
• A comma-separated list of time values, for defining separate delay values on multiple transitions for a single element

The default value for transition-delay is 0s, meaning that no delay will take place and the transition will start to occur immediately. The time value can be expressed as a decimal-based number for more precise timing.

When a transition has a delay value that is negative, it will cause the transition to begin immediately (with no delay), however the transition will begin partway through the process, as though it had already begun.

The following example shows a hover effect on a box that uses a transition-delay value of2s with a transition duration of 1s:

<div class="box uni"></div>

.box {
  width: 150px;
  height: 150px;
  background: goldenrod;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition-delay: 2s;
  -moz-transition-delay: 2s;
  -o-transition-delay: 2s;
  transition-delay: 2s;
}

.box:hover {
  background-color: blue;
  cursor: pointer;
}

.uni {
   -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: background-color;
  -moz-transition-property: background-color;
  -o-transition-property: background-color;
  transition-property: background-color;
}

Now compare that to the following demo, which has a delay of -1s and a duration of 3s:

<div class="box uni"></div>

.box {
  width: 150px;
  height: 150px;
  background: goldenrod;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition-delay: -1s;
  -moz-transition-delay: -1s;
  -o-transition-delay: -1s;
  transition-delay: -1s;
}

.box:hover {
  background-color: blue;
  cursor: pointer;
}

.uni {
   -webkit-transition-duration: 3s;
  -moz-transition-duration: 3s;
  -o-transition-duration: 3s;
  transition-duration: 3s;
  -webkit-transition-property: background-color;
  -moz-transition-property: background-color;
  -o-transition-property: background-color;
  transition-property: background-color;
}

Notice that in the second example, only the final two-thirds of the actual transition are visible and there is no delay. The negative value removes the delay and effectively cuts into the duration.

For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:

.example {
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}

IE10 (the first stable version of IE to support transition-delay) does not require the -ms-prefix.

Related Properties

• transition
• transition-property
• transition-timing-function
• transition-duration

Browser Support