animation-play-state
animation-play-state
CSS 属性设置动画是正在运行还是暂停。
试试
恢复暂停的动画将从暂停时开始的地方开始动画,而不是从动画序列的开头重新开始。
语法
css
/* 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: revert;
animation-play-state: revert-layer;
animation-play-state: unset;
值
注意:当您在 animation-*
属性上指定多个逗号分隔的值时,它们将按 animation-name
出现的顺序应用于动画。对于动画数量和 animation-*
属性值不匹配的情况,请参见 设置多个动画属性值。
正式定义
正式语法
示例
暂停动画
此动画已暂停,但在您悬停其上时会运行。
HTML
html
<div class="box"></div>
CSS
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 动画 以获取示例。
规范
规范 |
---|
CSS 动画级别 1 # animation-play-state |
浏览器兼容性
BCD 表格仅在浏览器中加载