animation-iteration-count
版本： CSS3
animation-iteration-count
CSS属性定义动画在结束前运行的次数可以是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>
效果图
