css动画大家都不陌生，但是你知道css动画是可暂停的吗？如果你不知道就来看看吧。

虽然用过很多次animation，但是也就前几天才知道动画是可以暂停的，可见自己对动画的了解还是不够深，一起来学习一下今天的主角—animation-play-state（running | paused）

该属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。其中恢复已暂停的动画，是从它暂停的时候，而不是从动画的起点。

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

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