css3 动画执行次数,CSS3动画循环次数

CSS3的animation-iteration-count属性详解:

此属性用于设置animation动画的过渡时长。

更多关于animation属性内容可以参阅CSS3的animation属性用法详解一章节。

语法结构:animation-iteration-count：infinite |  [ , infinite |  ]*

参数解析:

1.infinite:规定动画可以无限循环。

2.number:明确指定动画循环的次数。

特别说明:

如果提供多个属性值，以逗号进行分隔。

对应的脚本特性为animationIterationCount。

代码实例:

实例一:html>

php中文网

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;}

}

以上代码设置动画可以无限循环。

实例二:html>

蚂蚁部落

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;}

}

上面代码使用animation-iteration-count属性规定了两个参数，也就是两个动画的运行次数。