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


selector { 

         transition-delay: time | initial | inherit;



Possible values for transition-duration property are:

  • time; Specifies the waiting period before starting the transition effect in seconds or miliseconds, with 0 being default.
  • initialinherit

The default value for transition-delay is 0; 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. Besides a length (number) format, the value may also be initial or inherit.


The transition-delay property example:


›› go to examples ››