动画过渡效果如何取消？

Question

我有一个盒子 .box，它无限循环播放旋转动画。

@keyframes spin {
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}

动画仅在盒子的第二个类名为“running”时应用。

.box.running {
  animation-name:spin;

这样做的目的是为了能够通过JavaScript轻松地停止动画（通过删除第二个类名）。我希望它可以平滑地从动画的任何位置过渡回到正常的旋转状态，目前该状态为0deg。非常感谢您的任何帮助。

- Gage Hendy Ya Boy

---

使用JavaScript创建一个新的关键帧。将0%设置为当前位置，将100%设置为0度，并根据两者之间的差异计算动画持续时间需要多长。 - Our_Benefactors

@我们的赞助商 谢谢！我一直在研究不同的方法来动态创建关键帧，但它们似乎都有点复杂。这是唯一的解决方案吗？我觉得可能有更简单的方法来做到这一点... - Gage Hendy Ya Boy

我有一个解决方案，主要是CSS！ - Ivan

Answer 1

我使用CSS使其正常工作。JS允许我们仅切换类名。您必须使用两个类来执行动画：一个类使div旋转（.spin）,另一个终止旋转（.end）。它们都使用相同的@keyframes，速度相同且线性。

• .spin持续时间无限
• .end持续时间为0.5秒

基本上，当JS脚本（按下按钮时）将类.end添加到div中，因此.spin的 animation属性被.end覆盖，从而使其将div旋转回原始位置。

var a = function() {

  document.querySelector('.box').setAttribute('class', 'box spin end')

}

document.querySelector('#end').onclick = function() {
  a()
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: purple;
  animation-fill-mode: backwards;
}

.spin {
  animation: spin 2s infinite linear;
}

.end {
  animation: spin 2s 0.5s linear;
}

<div class="box spin"></div>

<br>

<button id="end">STOP SPIN</button>

此外，不要忘记设置.box的属性animation-fill-mode为backwards。

- Ivan

---

这太完美了！谢谢！ - Gage Hendy Ya Boy

@GageHendyYaBoy 太赞了！我原本不确定只用CSS是否能实现，现在很高兴它确实可以。 - Ivan