CSS transition-delay Property

The transition-delay specifies a time delay before the transition starts.

Transition delay can be set in seconds (s) or in milliseconds (ms).

By default, transitions are played immediately, i.e. upon page load.

Example

#

An element with a transition-delay. Hover over the rectangle and after 1 second the width transition will start.

<style>
  .transition-property {
    width: 100px;
    height: 100px;
    background: orangered;
    cursor: pointer;
    transition-property: width;
    transition-duration: 1s;
    transition-delay: 1s;
  }

  .transition-property:hover {
    width: 350px;
  }
</style>

<div class="transition-property"></div>

Syntax

transition-delay: time | initial | inherit;

Values

#

Value Description
time Number of seconds or milliseconds to wait before transition starts
initial Sets the value to its default value value.
inherit Inherits the value from the parent element.

Browser support

This table shows when transition-delay support started for each browser.

Chrome
26.0 Mar 2013
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
12.1 Nov 2012
Safari
6.1 Jun 2013

You may also like

Guides