animation-iteration-count
Experimental
这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
Summary 概要
animation-iteration-count
CSS 属性 定义动画在结束前运行的次数 可以是1次 无限循环.
如果指定了多个值,每次播放动画时,将使用列表中的下一个值,在使用最后一个值后循环回第一个值。
通常情况下,使用animation
简写属性,来一次性设置所有动画属性会更方便。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax 语法
/* 值为关键字 */
animation-iteration-count: infinite;
/* 值为数字 */
animation-iteration-count: 3;
animation-iteration-count: 2.4;
/* 指定多个值 */
animation-iteration-count: 2, 0, infinite;
animation-iteration-count
属性可以指定一个或多个以逗号分隔的值。
Values 属性值
infinite
- 无限循环播放动画.
<number>
- 动画播放的次数;默认值为
1
。可以用小数定义循环,来播放动画周期的一部分:例如,0.5
将播放到动画周期的一半。不可为负值。
Formal syntax
<single-animation-iteration-count>#where
<single-animation-iteration-count> = infinite | <number>
Examples 示例
去看 CSS animations for examples. 点击链接去看栗(例)子
Specifications 说明 用法
Specification | Status | Comment |
---|---|---|
CSS Animations Level 1 animation-iteration-count |
Working Draft | Initial definition |
Browser compatibility 兼容性
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help! (en-US)
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Yes)-webkit (en-US) 43.0 |
5.0 (5.0)-moz (en-US) 16.0 (16.0) |
10 | 12 -o (en-US) 12.10 |
4.0-webkit (en-US) |
Feature | Android | Chrome | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | (Yes)-webkit (en-US) | ? | 5.0 (5.0)-moz (en-US) 16.0 (16.0) |
? | ? | ? | 43.0 |