通过引入 Font Awesome 和 Animate.css，可快速实现图标旋转动画。使用 animate__rotateForever 实现持续旋转，如 ；通过自定义 CSS 变量 --animate-duration 控制速度，添加 animate__rotateIn 实现单次动画；结合 JavaScript 移除并重新添加类名，可实现点击重播动画效果，整体方案简洁高效。
要实现 Font Awesome 图标的旋转动画，可以结合 Animate.css 提供的预设动画效果，让图标产生平滑的旋转。这种方法无需手写关键帧，简单高效。
引入必要的资源
确保页面中加载了 Font Awesome 和 Animate.css 的 CDN 链接：
使用 animate__rotateIn 或自定义旋转
Animate.css 提供了 animate__rotateIn、animate__rotateOut 等进入类动画。若需持续旋转，可使用 animate__rotateForever。
<i class="fas fa-spinner animate__animated animate__rotateForever"></i>
这会让 Font Awesome 的 spinner 图标持续无限旋转。
立即学习“前端免费学习笔记（深入）”；
控制动画行为（速度与循环）
默认动画时长为 1 秒。可通过 CSS 覆盖调整：
.custom-fast-spin {
--animate-duration: 0.6s;
}
<i class="fas fa-sync animate__animated animate__rotateForever custom-fast-spin"></i>
也可以设置只播放一次：
<i class="fas fa-cog animate__animated animate__rotateIn"></i>
触发动画交互（如点击启动）
使用 JavaScript 控制动画重播：
document.getElementById("icon").addEventListener("click", function () {
this.classList.remove("animate__rotateIn");
void this.offsetWidth; // 强制重排
this.classList.add("animate__rotateIn");
});
这样每次点击图标都会重新播放旋转进入动画。
基本上就这些。用 Font Awesome 提供图标，Animate.css 实现旋转动画，组合起来既简洁又视觉友好。
