View in EnglishAlways switch to English

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 2015年9月.

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

尝试一下

animation-play-state: paused;

animation-play-state: running;

<section>  <div></div></section>

#example-element {  background-color: #1766aa;  color: white;  margin: auto;  margin-left: 0;  border: 5px solid #333;  width: 150px;  height: 150px;  border-radius: 50%;}.animating {  animation-name: slide;  animation-duration: 3s;  animation-timing-function: ease-in;  animation-iteration-count: infinite;  animation-direction: alternate;}@keyframes slide {  from {    background-color: orange;    color: black;    margin-left: 0;  }  to {    background-color: orange;    color: black;    margin-left: 80%;  }}

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

语法

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></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);  }}