animation-iteration-count

版本：CSS3

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

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

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

示例

/* 值为关键字 */
animation-iteration-count: infinite;

/* 值为数字 */
animation-iteration-count: 3;
animation-iteration-count: 2.4;

/* 指定多个值 */
animation-iteration-count: 2, 0, infinite;

浏览器支持


IE10以上版本的浏览器都支持`animation-iteration-count/code>`

语法

animation-iteration-count:infinite>| <number>

取值：

infinite：无限循环播放动画。
<number>：动画播放的次数；默认值为1。可以用小数定义循环，来播放动画周期的一部分：例如，0.5将播放到动画周期的一半。不可为负值。

默认值	1
适用于	所有元素，包含伪对象`::before`and`::after`
继承性	无
动画性	否
计算值	指定值
媒体	视觉<

实例

<style type="text/css">
div{
	width:100px;
	height:100px;
	position:relative;
	background-color:hsl(120,65%,75%);
	animation:demo 5s;
	animation-iteration-count：infinite;
	-webkit-animation-iteration-count：infinite;/*safari和chrome*/
}
@keyframes demo
{
	from{left:0px;}
	to{left:350px;opacity:0.5;}
}
/*safari和chrome*/
@-webkit-keyframes demo
{
	from{left:0px;}
	to{left:350px;opacity:0.5;}
}
</style>
</head>
<body>
	<div></div>	
</body>

效果图