CSS3의 animation-iteration-count 속성에 대한 자세한 설명:
이 속성은 애니메이션 애니메이션의 전환 기간을 설정하는 데 사용됩니다.
애니메이션 속성에 대한 자세한 내용은 CSS3의 애니메이션 속성 사용법에 대한 자세한 설명을 참조하세요.
문법 구조:
animation-iteration-count：infinite | <number> [ , infinite | <number> ]*
매개변수 분석:
1.infinite: 애니메이션이 무한 반복될 수 있음을 지정합니다.
2.number: 애니메이션 루프 수를 명시적으로 지정합니다.
특별 참고 사항:
여러 속성 값이 제공되는 경우 쉼표로 구분하세요.
해당 스크립트 기능은 animationIterationCount입니다.
코드 예:
예 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 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>위 코드로 설정된 애니메이션은 무한 반복될 수 있습니다.
예제 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>위 코드는 animation-iteration-count 속성을 사용하여 두 애니메이션이 실행되는 횟수인 두 매개변수를 지정합니다.
다음 섹션