CSS3 animation-Usage and examples of delay attribute

　CSS animation-The delay attribute defines when the animation starts playing (for example: the value of2s, indicating that the animation will start playing after the application2starts playing after 0 seconds. The value of this property can be specified in seconds (s) or milliseconds (ms).

The following table summarizes the usage context and version history of this property.

animation-s"

Syntax of delay usage

animation-The syntax of this attribute is as follows:

delay: time | initial | inherit-The following example demonstrates how to use animation

Example
　　　　.box {　5height:
　　　　width:　5height:
　　　　0px;
　　　　background: red;
　　　　/*　s;　*/
　　　　-webkit-animation-position: relative;
　　　　-webkit-animation-name: moveit;　4delay:
　　　　-webkit-animation-duration:　2delay:
　　　　
　　　　animation-position: relative;
　　　　animation-name: moveit;　4delay:
　　　　animation-duration:　2delay:
0%;}
　
/*　s;　*/
Chrome, Safari, Opera-webkit-@
　　　　@keyframes moveit {
　　　　from {left: 0;}　5to {left:
0%;}
　
keyframes moveit {
　　　　@keyframes moveit {
　　　　from {left: 0;}　5to {left:
0%;}

Attribute Value

The following table describes the values of this attribute.

Browser Compatibility

animation-Browser Compatibility of delay Attribute, all mainstream browsers support this attribute.

Further Reading

Please refer to the following tutorials:CSS3Animation.

Related Attributes and Rules:animation,animation-name,animation-duration,animation-timing-function,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state,@keyframes.