突然发现css3动画是可以暂停的

今天逛下大前端发现一个好玩的东西，用css3做动画我们已经玩过很多次了吧，结果居然还可以暂停这动画，这是之前没有运到过的，话不多说上代码。

1. 首先上html代码(对就只要一个div)

	<div class="play-state">
	  	暂停
	</div>

2.给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;
  }
}

w3school官网（animation-play-state:paused;）参数对应的地址

转发来自大前端原文章链接