CSS

动画迭代计数 | animation-iteration-count

动画-迭代计数

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

animation-iteration-count: infinite; animation-iteration-count: 3; animation-iteration-count: 2.3; animation-iteration-count: 2, 0, infinite;

使用速记属性animation一次性设置所有动画属性通常很方便。

Initial value1
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe 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动画。

规范

SpecificationStatusComment
CSS AnimationsThe definition of 'animation-iteration-count' in that specification.Working DraftInitial definition.

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support(Yes)-webkit 43.0(Yes)-webkit (Yes)5.0 (5.0)-moz 16.0 (16.0)11012 -o 12.104.0-webkit

FeatureAndroidChromeEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support(Yes)-webkit?(Yes)-webkit (Yes)5.0 (5.0)-moz 16.0 (16.0)1???43.0