animation-iteration-count

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

Summary 概要

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

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

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

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
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!
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit
43.0
5.0 (5.0)-moz
16.0 (16.0)
10  12 -o
12.10
4.0-webkit
Feature Android Chrome Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support (Yes)-webkit ? 5.0 (5.0)-moz
16.0 (16.0)
? ? ? 43.0
 

See also