Question

所以我有一个方框.box。那无限重复旋转动画。

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

动画仅在框的第二个班级名称正在运行时应用

.box.running {
  animation-name:spin;

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

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

非常感谢任何帮助。

Answer 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

转出动画？

1 个答案: