CSS transition-delay

The CSS transition-delay property defines when the transition will start. It delays the transition from when it is applied.

CSS property transition-delay

CSS version: CSS 3
Value: time [, time]*
Initial: 0s
Applies to: all elements, :before and :after pseudo elements
Inherited: no

Example – transition-delay

In the following code, CSS property transition-delay can be changed to the following values
  • 1s
  • 2s
  • 4s
<style type="text/css">
div {
 width: 100px;
 background-color: lightblue;
 transition-property: width;
 transition-duration: 2s;
 transition-delay: 1s;
div:hover {
 width: 200px;

  Hover me to see transition of width
transition-delay refresh


Specification and Browser compatibility

CSS3 TransitionsW3C Working DraftCSS3
Yes 26+ Yes 16+ Yes 10+ Yes 12+ Yes 6.1+ Yes 12.1+
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 7.0-7.1+ Yes 10+ Yes 12.1+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments