animate-spin默认1秒匀速旋转，显慢且生硬；需搭配duration-*调速、自定义animation-timing-function改缓动，颜色由border-color/color等控制，不支持dark:前缀，老版Safari需优化合成层。
直接用就能实现基础转圈，但默认转速慢、颜色继承父级、不支持自定义时长或缓动——得靠组合类或少量 CSS 补足。
为什么
转得慢且停顿感强
Tail
win
d 的
基于
，默认是
。1 秒一圈对加载动画偏慢，人眼容易感知卡顿；linear 缓动也让旋转缺乏自然感。
实操建议：
加
或
可提速（注意：Tailwind v3.4+ 才原生支持该类，旧版需手动配
）
想换缓动？
本身不支持，得覆盖
，比如加
配合媒体查询，或直接写内联 style：
别依赖
单独控制速度——它只是开关，时长和缓动得另外配
的颜色为什么不是你想要的
不改颜色，只改 transform。所以转圈元素显示什么色，完全取决于它的
（文本）或
（块级）或
（边框）。
立即学习
“
前端免费学习笔记（深入）
”；
常见错误现象：转圈看不见，其实是用了透明色或与背景同色。
使用场景举例：
elasticsearch-9.4.0 win
PHP中文网提供Elasticsearch 9.4.0 Windows 版本压缩包下载解压即用，内置 OpenJDK 无需额外配置 Java 环境。该版本重磅推出原生 Prometheus 支持、正式版 Elastic Workflows 以及基于 NVIDIA cuVS 的 GPU 加速向量索引，大幅提升 AI 检索与可观测性能力。建议前往官网下载，快速体验极速搜索与强大的数据分析功能。
下载
用
画一个只有一条边的圆环，再加
→ 转的是蓝边
用
+
配 SVG 图标 → 转的是图标颜色
用
+
的 div → 背景不会“转”，只会原地晃（因为没视觉变化），这是无效用法
如何让转圈在深色模式下自动换色
Tailwind 的暗色模式前缀
对动画类无效——
不会触发，因为
本身不含颜色逻辑。
正确做法是把颜色控制和动画分离：
写
控制边框色
再叠加
（它在亮/暗模式下都生效）
如果用 SVG，可在
+
组合下，让
作用于整个 SVG 容器
注意：不要给
加
前缀，纯浪费字符。
移动端 Safari 上
卡顿怎么办
iOS 16.4 之前，Safari 对
的硬件加速不敏感，尤其在低功耗模式下，
可能掉帧或暂停。
性能影响明显时可尝试：
加
（Tailwind 默认不提供，需在
的
中补）
避免在大尺寸元素上用，优先用小尺寸
圆环，比
的 div +
更省资源
真要兼容老 iOS？宁可用
自定义一个带
的版本，并加
前缀
复杂点在于：动画是否流畅，不取决于
写得多漂亮，而取决于它作用的元素是否被浏览器当作独立合成层处理——这点容易被忽略。
animate-spinanimate-spinanimate-spin@keyframes spin1s linear infiniteduration-300duration-500animation-durationanimate-spinanimation-timing-functionmotion-reduce:animate-nonestyle="animation-timing-function:cubic-bezier(0.4,0,0.2,1)"animate-spinanimate-spinanimate-spincolorbackground-colorborder-colorborder-4 border-blue-500 border-t-transparent rounded-fullanimate-spintext-rose-400animate-spinbg-gray-200animate-spindark:dark:animate-spinanimate-spindark:border-indigo-300 border-t-transparentanimate-spindark:fill-currenttext-white dark:text-gray-800animate-spinanimate-spindark:animate-spintransform: rotate()animate-spinwill-change-transformtailwind.config.jstheme.extend.extend.transformborder-4w-16 h-16animate-spin@keyframestransform: rotateZ()-webkit-transformanimate-spin