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

原创文章,作者:Uniapper,如若转载,请注明出处:https://www.uniapper.com/659.html

(2)
打赏 微信扫一扫 微信扫一扫
上一篇 2021年12月4日 下午11:57
下一篇 2022年1月8日 下午1:21

相关推荐

发表回复

登录后才能评论
欢迎访问www.uniapper.com!交流QQ群:35429521