CSS 属性animation-play-state 检查动画是正在运行还是处于暂停状态。
如果暂停的动画恢复，它将从暂停的位置继续，保持进度，而不是从动画序列的第一帧重新开始。
属性值
CSS 属性animation-play-state 可以具有以下值之一:
running: 动画当前正在进行中。
paused: 动画当前处于暂停状态。
注意:当在animation-*属性上指定多个逗号分隔值时，这些值将按照animation-names的顺序应用于动画
语法
animation-play-state = <single-animation-play-state>#
<single-animation-play-state> = running | paused 适用范围
所有 HTML 元素，::before 和 ::after 伪元素。
CSS Animation-play-state: 运行状态
在下面的示例中，animation-play-state 属性控制动画是否正在主动运行或默认暂停。
它设置为运行，动画保持运行。
它允许动画开始当光标悬停在其上时，圆圈会随着缩放效果而脉动。
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 250px;
margin: 0;
background-color: #f0f0f0;
}
.circle-demo {
width: 100px;
height: 100px;
background-color: #ff6347;
border-radius: 50%;
animation-name: pulse;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-play-state: running;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.8);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="circle-demo"></div>
</body>
</html> CSS Animation-play-state: 暂停状态
在下面的示例中，animation-play-state 属性控制动画是主动运行还是默认暂停。
已设置暂停，动画保持暂停状态。
它不允许动画开始并继续。
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
margin: 0;
background-color: #f0f0f0;
}
.circle-demo {
width: 100px;
height: 100px;
background-color: #ff6347;
border-radius: 50%;
animation-name: pulse;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-play-state: paused;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.8);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="circle-demo"></div>
</body>
</html> CSS Animation-play-state: 两种状态
在下面的示例中，animation-play-state 属性控制动画默认是主动运行还是暂停.
最初设置为暂停，动画保持静态，直到悬停在上方，触发状态更改为运行。
它允许动画开始，并且当光标悬停在圆圈上时，圆圈会以缩放效果脉动。
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 250px;
margin: 0;
background-color: #f0f0f0;
}
.circle-demo {
width: 100px;
height: 100px;
background-color: #ff6347;
border-radius: 50%;
animation-name: pulse;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-play-state: paused;
}
.circle-demo:hover {
animation-play-state: running;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.8);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="circle-demo"></div>
</body>
</html>