Detailed explanation of animation-duration property of CSS3:
This property is used to set the transition duration of animation animation.
For more information about the animation attribute, please refer to the detailed explanation of the usage of the animation attribute of CSS3.
Grammar structure:
animation-duration：<time> [ ,<time>]*
Parameter analysis:
time: Specifies the duration of animation execution, the unit is seconds (s).
Special instructions:
If multiple attribute values are provided, separate them with commas.
The corresponding script feature is animationDuration.
Code example:
Example 1:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation infinite alternate;
-webkit-animation:theanimation infinite alternate ;
-moz-animation:theanimation infinite alternate ;
-o-animation:theanimation infinite alternate ;
-ms-animation:theanimation infinite alternate ;
-webkit-animation-duration:8s;
-moz-animation-duration:8s;
-o-animation-duration:8s;
-ms-animation-duration:8s;
animation-duration:8s;
}
@keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-moz-keyframes theanimation{
0% {top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-webkit-keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-o-keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>The above code sets the animation duration to 8 seconds.
Example 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:firstanimation infinite alternate,secondanimation infinite alternate;
-webkit-animation:firstanimation infinite alternate,secondanimation infinite alternate;
-moz-animation:firstanimation infinite alternate,secondanimation infinite alternate;
-o-animation:firstanimation infinite alternate,secondanimation infinite alternate;
-ms-animation:firstanimation infinite alternate,secondanimation infinite alternate;
-webkit-animation-duration:5s,2s;
-moz-animation-duration:5s,2s;
-o-animation-duration:5s,2s;
-ms-animation-duration:5s,2s;
animation-duration:5s,2s;
}
@keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-webkit-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-moz-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-o-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-ms-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-webkit-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-moz-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-o-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-ms-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>The above code uses animation-duration to specify two animation durations for two animations respectively.
Next Section