Transition delay property (transition-delay)

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

Syntax:

selector { 

         transition-delay: time | initial | inherit;

}

Values:

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.
• initial, inherit

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.

Example

The transition-delay property example:

 

›› go to examples ››