CSS动画的开始暂停（实例为图片旋转的暂停和播放）

主要使用CSS animation-play-state 属性来控制

定义和用法

animation-play-state 属性规定动画正在运行还是暂停。

注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。

默认值：	running
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.animationPlayState=”paused”

语法

animation-play-state: paused|running;

值	描述
paused	规定动画已暂停。
running	规定动画正在播放。

实 例：

.left-Poster{
	background-color: #0077AA;
	width: 40px;
	height: 40px;
	margin: 1rem;
	border-radius: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-size: contain;
	-webkit-animation: round_animate 5s linear infinite;
	animation: round_animate 5s linear infinite;
}
.left-Poster-animationPaused{
	animation-play-state: paused;
}

.left-Poster-animationRunning{
	animation-play-state: running;
}
@keyframes round_animate {
       to {
         transform: rotate(1turn);
       }
     }