Question

我有一个具有无限迭代次数的动画：

.spinner {
  animation: spinnerAnimation 2s linear infinite;
}

我想要的是让动画完成当前动画周期并在点击按钮时停止它（实际上不是点击按钮，但这是为了让事情更容易理解）：

$("button").click(function() {
  $(".spinner").addClass("stop");
})

这将向微调器添加stop类：

.spinner.stop {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

它不能很顺利，但在这种情况下我不太关心平滑度：

http://codepen.io/Deka87/pen/OXZvdm

唯一的问题是这不会停止IE边缘的动画，即在IE（支持动画的版本）中不起作用。有什么想法吗？

PS：animation-play-state: pause; 不是我需要的东西，因为这不会让动画完成当前的动画循环，而是将其暂停在当前位置。

PSS：我真的在寻找一个仅限CSS的解决方案，即让它在.spinner.stop{}内工作。

Answer 1

您的关键帧名称有问题 - spinnerAnimation vs preloaderAnimation
我能够设置IE停止动画的唯一方法是在animation: none;类中设置.stop：

$("button").click(function() {
  $(".spinner").addClass("stop");
})

.spinner {
  width: 30px; height: 30px;
  background: green;
  animation: spinnerAnimation 2s linear infinite;
}

.spinner.stop {
  -webkit-animation-iteration-count: 1;
  animation: none;
}

button {
  margin-top: 20px;
}
@-webkit-keyframes spinnerAnimation {
  0% {
    -webkit-transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spinnerAnimation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinner"></div>
<button>Stop spinner</button>

完成无限次迭代循环并使用CSS停止动画

1 个答案: