CSS3 animation loop times
Detailed explanation of the animation-iteration-count property of CSS3:
This property is used to set the transition duration of the 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-iteration-count：infinite | <number> [ , infinite | <number> ]*
Parameter analysis:
1.infinite: Specifies that the animation can loop infinitely.
2.number: Explicitly specify the number of animation loops.
Special instructions:
If multiple attribute values ??are provided, separate them with commas.
The corresponding script feature is animationIterationCount.
Code Example:
Example 1:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation infinite alternate;
-webkit-animation:theanimation alternate ;
-moz-animation:theanimation alternate ;
-o-animation:theanimation alternate ;
-ms-animation:theanimation alternate ;
-webkit-animation-duration:8s;
-moz-animation-duration:8s;
-o-animation-duration:8s;
-ms-animation-duration:8s;
animation-duration:8s;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
animation-iteration-count:infinite;
}
@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 animation set by the above code can loop infinitely.
Example 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:firstanimation 5s alternate,secondanimation 2s alternate;
-webkit-animation:firstanimation 5s alternate,secondanimation 2s alternate;
-moz-animation:firstanimation 5s alternate,secondanimation 2s alternate;
-o-animation:firstanimation 5s alternate,secondanimation 2s alternate;
-ms-animation:firstanimation 5s alternate,secondanimation 2s alternate;
-webkit-animation-iteration-count:infinite,2;
-moz-animation-iteration-count:infinite,2;
-o-animation-iteration-count:infinite,2;
-ms-animation-iteration-count:infinite,2;
animation-iteration-count:infinite,2;
}
@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 the animation-iteration-count attribute to specify two parameters, which are the number of runs of the two animations.
