博客

暂停CSS动画 ———– animation-play-state（running | paused）

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

HTML

<div class="stop">
  暂停
</div>

CSS

.stop {
  width: 100px;
  height: 100px;
  margin: 40px;
  text-align: center;
  line-height: 94px;
  border: 3px solid #e1efde;
  border-radius: 50%;
  animation: stop_ani 3s linear infinite;
  cursor: pointer;
}
//当鼠标移入该div的时候,加入这个属性则会暂停动画状态.
.stop:hover {
  animation-play-state: paused;
}

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