2019年11月27日

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


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

我们经常用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;
}
}

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732