transition-delay

transition-delay sets the offset between a property change and the start of its transition. A positive delay waits; a negative delay starts immediately partway through the transition.

Wait before moving

Check the box. The square waits 500ms, then moves over 800ms. Unchecking uses the same base rule for the return.

<input class="change" id="change" type="checkbox" /><label for="change"
  >Move the square</label
>
<div class="stage"><div class="box" aria-hidden="true"></div></div>

.stage {
  padding: 1rem;
  background: #eff6ff;
  min-height: 60px;
}
.box {
  width: 60px;
  height: 45px;
  background: #2563eb;
}
label {
  display: inline-block;
  padding: 0.75rem;
}
.box {
  transition-property: transform;
  transition-duration: 800ms;
  transition-delay: 500ms;
}
.change:checked ~ .stage .box {
  transform: translateX(100px);
}
@media (prefers-reduced-motion: reduce) {
  .box {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}

Start halfway through a linear transition

The one-second transition has a -500ms delay. It starts at the halfway point and uses only the remaining half-second, rather than waiting.

<input class="change" id="change" type="checkbox" /><label for="change"
  >Move the square</label
>
<div class="stage"><div class="box" aria-hidden="true"></div></div>

.stage {
  padding: 1rem;
  background: #eff6ff;
  min-height: 60px;
}
.box {
  width: 60px;
  height: 45px;
  background: #2563eb;
}
label {
  display: inline-block;
  padding: 0.75rem;
}
.box {
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: -500ms;
}
.change:checked ~ .stage .box {
  transform: translateX(100px);
}
@media (prefers-reduced-motion: reduce) {
  .box {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}

Values and defaults

The initial value is 0s and the property is not inherited. Times require s or ms units, including zero. Comma-separated delays match transition-property order; a shorter list repeats and unused extra entries do not create extra transitions. Delays may be negative; if a negative delay reaches beyond the duration, no visible interpolation remains.

Common mistakes

A delay does not create a changed value or enable a transition without duration. The old tooltip demo never changed its opacity and could not appear. Avoid delaying essential error or interaction feedback. A later transition shorthand resets the delay. Rapidly reversing a transition follows browser transition-reversal rules, not a new full-duration timer every time.

Learn transition-duration, transition, and animation-delay.

Sources and browser support

MDN: transition-delay describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.