Css 如何从足总旋转过渡到无旋转

一旦流程完成，我需要从元素中删除

fa spin

类

问题是旋转图标和非旋转图标之间没有转换

setTimeout（函数（）{
停止旋转器（）；
}, 2500);
函数stopSpinner（）{
$（'i'）.removeClass（'fa-spin'）；
}

---

与其使用

.fa spin

，为什么不使用CSS

转换

$（'i'）.addClass（'spin'）
i{
过渡：所有0.5s缓解；
}
.旋转{
变换：旋转（180度）；
变换原点：50%50%；
}
这对您来说可能已经过时了，但是您可以使用
animationiteration
事件来了解动画的迭代何时完成，a la:


var done=false；
setTimeout（函数（）{
完成=正确；
}, 2546);
$（'.fa spin'）。on（'animationiteration'，函数（事件）{
如果（完成）{
$（event.target）.removeClass（'fa-spin'）；
}
});
您可以使用暂停动画

正确的。我修改了小提琴，有时还能用。我不知道为什么不一致@emzero-我建议不要使用
.fa-spin
，因为它旋转的
360度
的时间未知，使用
添加
转换
。fa-spin
将在
类被移除后旋转回
0度
。但是您的代码片段不会继续旋转。。。它只需要360度旋转，就这样。我想让它在这个过程中旋转（因此使用fa-spin，它使用动画css3属性），一旦完成，就可以平稳地停止旋转。检查我的最新小提琴：这应该是答案。
// css
.pause-spinner {
  animation-play-state: paused;
}

// js (jQuery)
$("i").addClass("pause-spinner");