动画迭代计数 | animation-iteration-count
动画-迭代计数
animation-iteration-count
CSS属性 定义动画在结束前运行的次数 可以是1次 无限循环。
animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.3;
animation-iteration-count: 2, 0, infinite;
使用速记属性animation
一次性设置所有动画属性通常很方便。
Initial value | 1 |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
语法
值
infinite无限循环播放动画.<number>动画播放的次数 不可为负值. 可以用小数定义循环(0.5 将播放动画到关键帧的一半(from 0 ~ 50%).
注意
:当您在一个animation-*
属性上指定了多个以逗号分隔的值时,它们将以animation-name
不同的方式分配给属性中指定的动画,具体取决于有多少个值。有关更多信息,请参阅设置多个动画属性值。
形式语法
<single-animation-iteration-count>#where
<single-animation-iteration-count> = infinite | <number>
示例
有关示例,请参阅CSS动画。
规范
Specification | Status | Comment |
---|---|---|
CSS AnimationsThe definition of 'animation-iteration-count' in that specification. | Working Draft | Initial definition. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | (Yes)-webkit 43.0 | (Yes)-webkit (Yes) | 5.0 (5.0)-moz 16.0 (16.0)1 | 10 | 12 -o 12.10 | 4.0-webkit |
Feature | Android | Chrome | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | (Yes)-webkit | ? | (Yes)-webkit (Yes) | 5.0 (5.0)-moz 16.0 (16.0)1 | ? | ? | ? | 43.0 |