CSS animation-play-state 属性值说明
| 值 | 说明 |
|---|---|
| running | 它是动画运行时的默认值。 |
| paused | 动画暂停。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
语法
animation-play-state: paused | running | initial | inherit;
具有 "running" 值的 animation-play-state 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: #ccc;
position: relative;
animation: play 10s;
animation-play-state: running;
}
@keyframes play {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h2>Animation-play-state example</h2>
<p>Here the animation-play-state is set to "running".</p>
<div></div>
</body>
</html>
在以下示例中，当我们悬停时动画将停止。
具有 "paused" 值的 animation-play-state 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: #8ebf42;
position: relative;
animation: play 1s infinite;
}
div:hover {
animation-play-state: paused;
}
@keyframes play {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<p>Hover over the green box to stop the animation.</p>
<div></div>
</body>
</html>
CSS animation-play-state 属性指定动画是运行还是暂停。
如果我们恢复暂停的动画，它将从暂停时停止的位置开始，而不是从动画序列的开头开始。
此外，我们可以从暂停状态运行动画。
当为任何动画属性指定多个逗号分隔值时，它们将以不同的方式添加到动画名称中定义的动画。
animation-play-state 属性是 CSS3 属性之一。
在 JavaScript 中，此属性可用于在循环中间暂停动画。
| 初始化 | running |
|---|---|
| 应用于 | 所有元素。它也适用于：：before和：：after伪元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3型 |
| DOM 语法 | object.style.animationPlayState=“paused”； |
日期：2020-06-02 22:14:15 来源：oir作者：oir