顺利停止CSS旋转动画

Question

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

.rotateToStop{
    ...
}

我将此类添加到html页面中的图像。在我想要从未知关键帧平稳地停止旋转之后不久。我必须创建另一个css类：

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

来自javascript代码：

self.combobox.highlighted.connect(self.return_higlighted_index)

但我对css＆＃tr; rotateToStop＆＃39;上课，有人可以帮帮我吗？ =）

Answer 1

如果您只是通过删除类来从元素中删除动画，我担心您无法顺利停止动画。

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

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

在这种情况下，您不应删除.rotate类，但必须切换启动或暂停动画的类。

一个问题：动画会在您添加所需类的时刻准确冻结。