animation-play-state

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

animation-play-state CSS 属性设置动画是运行还是暂停。

尝试一下

恢复暂停的动画将从暂停时停止的位置开始播放,而不是从动画序列的开头重新开始播放。

语法

css
/* 单个动画 */
animation-play-state: running;
animation-play-state: paused;

/* 多个动画 */
animation-play-state: paused, running, running;

/* 全局值 */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: revert;
animation-play-state: revert-layer;
animation-play-state: unset;

running

当前动画正在运行

paused

当前动画已被停止

备注: 当你在 animation-* 属性上指定多个逗号分隔的值时,它们将按照 animation-name 出现的顺序应用于动画。对于动画数量和 animation-* 属性值不匹配的情况,请参见设置多个动画属性值

形式定义

初始值running
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性
计算值as specified
动画类型Not animatable

形式语法

animation-play-state = 
<single-animation-play-state>#

<single-animation-play-state> =
running |
paused

示例

暂停动画

这个动画被暂停了,但是当你将鼠标悬停在上面时会继续运行。

HTML

html
<div class="box"></div>
css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.box:hover {
  animation-play-state: running;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

结果

将鼠标悬停在矩形上来播放动画。

参见 CSS 动画以获取示例。

规范

Specification
CSS Animations Level 1
# animation-play-state

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animation-play-state
paused
running

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见