前端外包之css3动画暂停属性animation-play-state

11月/27日


都说前端很简单,我说,越简单的东西做好越难。

我们经常用css3写一些动画,很是方便,下面普及一个前端开发冷知识,css动画设置暂停 animation-play-state, 你用过吗?

看代码

.play-state {
width: 100px;
height: 100px;
margin: 40px;
text-align: center;
line-height: 94px;
border: 3px solid #e1efde;
border-radius: 50%;
animation: play-state 3s linear infinite;
cursor: pointer;
}

.play-state:hover {
animation-play-state: paused;
}

@keyframes play-state {
0% {
margin-left: 0;
}
100% {
margin-left: 200px;
}
}

切图网始于2007年, 前端外包 服务拓荒者、领航者,提供专业的前端外包服务,微信公众号 qietuwang