过渡到动画？答案

【问题标题】：Transition out of animation?过渡到动画？
【发布时间】：2017-08-07 20:34:17
【问题描述】：

所以我有一个盒子.box。这会无限重复旋转动画。

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

动画只在盒子的第二个类名运行时应用

.box.running {
  animation-name:spin;

这样做的目的是让我可以通过 javascript 轻松停止动画。（通过删除第二个类名。）

我希望它从动画中的任何位置平滑过渡，回到正常旋转，现在是0deg。

任何帮助将不胜感激。

【问题讨论】：

使用 javascript 创建一个新的关键帧。将0%设置为当前位置，100%设置为0deg，根据两者的差异计算动画时长需要多长时间。
@Our_Benefactors 谢谢！我一直在研究动态创建关键帧的不同方法，不过它们看起来都有些健壮。这是唯一的解决方案吗？我觉得可能有更简单的方法来做到这一点..
我有一个解决方案，主要是CSS！

标签： javascript jquery css animation

【解决方案1】：

我设法使用 CSS 使其工作。 JS 允许我们切换类名。您必须为动画使用两个类：一个将使 div 旋转 (.spin)，另一个将终止旋转 (.end)。两者都使用相同的@keyframes，具有相同的速度并且是线性的。

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

基本上当JS脚本（按下按钮时）类.end被添加到div中，因此.spin的属性animation被.ends覆盖，允许它旋转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

【讨论】：

这太完美了！谢谢！
@GageHendyYaBoy 太棒了！我不太确定它是否仅适用于 CSS，我很高兴它确实如此。