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);
       }
     }

Posted in CSS

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注