CSS animation-iteration-count 属性

CSS animation-iteration-count 属性定义动画在结束前运行的次数可以是1次无限循环.

如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。

通常情况下，使用animation简写属性，来一次性设置所有动画属性会更方便。

实例

播放动画三次：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 3s;
animation-iteration-count:3;
/* Safari and Chrome */
-webkit-animation:mymove 3s;
-webkit-animation-iteration-count:3;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-iteration-count 属性。</p>
<div></div>
</body>
</html>

运行一下

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit-、-moz- 或 -o- 的数字表示使用前缀的首个版本。

属性
animation-iteration-count	43.04.0 -webkit-	10.0	16.05.0 -moz-	9.04.0 -webkit-	30.015.0 -webkit-12.0 -o-

定义和用法

animation-iteration-count 属性定义动画的播放次数。

默认值：	1
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.animationIterationCount=3

语法

animation-iteration-count: n|infinite;

值	描述
n	定义动画播放次数的数值。
infinite	规定动画应该无限次播放。

CSS animation-iteration-count 属性

实例

浏览器支持

定义和用法

语法

相关页面

分类导航