动画播放状态属性 | animation-play-state
动画播放状态
animation-play-stateCSS 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。
/* Single animation */
animation-play-state: running;
animation-play-state: paused;
/* Multiple animations */
animation-play-state: paused, running, running;
/* Global values */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: unset;
恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。
| Initial value | running |
|---|---|
| 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 |
语法
值
running当前动画正在运行。paused当前动画以被停止。
注意：当您在一个animation-*属性上指定了多个以逗号分隔的值时，它们将以animation-name不同的方式分配给属性中指定的动画，具体取决于有多少个值。有关更多信息，请参阅设置多个动画属性值。
正式语法
<single-animation-play-state>#where
<single-animation-play-state> = running | paused
示例
有关示例，请参阅CSS动画。
规范
| Specification | Status | Comment |
|---|---|---|
| CSS AnimationsThe definition of 'animation-play-state' 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 | (Yes)-webkit |
| Feature | Android | Chrome | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| Basic support | ? | ? | (Yes)-webkit (Yes) | ? | ? | ? | ? | ? |
