CSS3 transition-Usage and examples of the 'delay' property

transition-The 'delay' CSS property defines when the transformation should start (for example, one2The 's' value indicates that the transformation will take effect in the application2seconds after). The value of this attribute can be specified as seconds or milliseconds.

The following table provides usage instructions and version history of this attribute, as well as its usage syntax in JavaScript scripts.

transition-The syntax of delay usage

The syntax of this attribute is as follows:

transition-delay:　time　|　initial　|　inherit

The following example demonstrates how to use transition-delay attribute.

button　{
　　　　background:　#fd7c2a;
　　　　/*　For　Safari　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　4s;
　　　　-webkit-transition-delay:　2s;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　4s;
　　　　transition-delay:　2s;
}
button:hover　{
　　　　background:　#3cc16e;
}

Attribute value

The following table describes the value of this attribute.

Browser compatibility

transition-The compatibility of delay attribute in browsers, the numbers in the following table represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.

For further reading

Please refer to the following tutorials:CSS3 Transitions.

Related attributes:transition,transition-duration,transition-property,transition-timing-function.