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

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