平滑停止 CSS 旋转动画答案

【问题标题】：Stop a CSS rotate animation smoothly平滑停止 CSS 旋转动画
【发布时间】：2017-09-12 08:27:43
【问题描述】：

我创建了这个示例 css 类来无限期地旋转图像：

.rotate{
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

我将这个类添加到我的 html 页面中的图像中。不久之后，我想从未知的关键帧平滑地停止旋转。我必须创建另一个这样的 CSS 类：

.rotateToStop{
    ...
}

来自 javascript 代码：

$('myelement').addClass('rotate');
// ... 
// shortly after, when an specific event is triggered
$('myelement').removeClass('rotate');
$('myelement').addClass('rotateToStop');

但我不知道我在 css 'rotateToStop' 类中的表现如何，有人可以帮助我吗？ =)

【问题讨论】：

标签： javascript jquery css css-animations

【解决方案1】：

如果只是通过移除类从元素中移除动画，恐怕无法顺利停止动画。

但是你可以使用这个来停止动画：

.rotateToStop {
  animation-play-state: paused; 
}

在这种情况下，您不应删除 .rotate 类，而必须切换一个开始或暂停动画的类。

一个问题：动画将在您添加所需类的那一刻完全冻结。

【讨论】：

好吧，确实，我不想完全停下来:)