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 属性设置动画是运行还是暂停。
尝试一下
animation-play-state: paused;
animation-play-state: running;
<section class="flex-column" id="default-example">
<div class="animating" id="example-element"></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;
值
备注:
当你在 animation-*
属性上指定多个逗号分隔的值时,它们将按照 animation-name
出现的顺序应用于动画。对于动画数量和 animation-*
属性值不匹配的情况,请参见设置多个动画属性值。
形式定义
形式语法
示例
暂停动画
这个动画被暂停了,但是当你将鼠标悬停在上面时会继续运行。
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 |