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