CSS3 animation-Usage and examples of the duration attribute

CSS3 animation-The duration attribute specifies the number of seconds (s) or milliseconds (ms) the animation should take to complete one cycle.

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

animation-Syntax of duration usage

The syntax of this attribute is as follows:

animation-duration: time | initial | inherit

The following example demonstrates how to use animation-duration Attribute.

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

Attribute Value

The following table describes the value of this attribute.

Browser Compatibility

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

Further Reading

Please refer to the following tutorials:CSS3Animation.

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