SpinKit 动画需加唯一前缀以防冲突，IE11 不支持多值 transform 和高精度 cubic-bezier，Vue/React 中需避免频繁卸载导致动画失效，颜色尺寸调整须按组件特性修改对应属性而非仅 color。
SpinKit 的 CSS 类名必须加前缀，否则动画不触发
SpinKit 本身不提供全局命名空间，所有动画类名（如 sk-circle、sk-cube-grid）都是裸名。如果项目里已有同名类（比如某个 UI 框架也定义了 sk-circle），或者你直接复制 HTML 到已有样式环境里，大概率动画不动——因为 CSS 规则被覆盖或未命中。
实操建议：
- 始终用唯一前缀重命名类，例如把
sk-rotating-plane改成myapp-sk-rotating-plane，并同步更新对应 CSS 文件里的选择器 - 不要只引入 SpinKit 的 CSS 而不检查是否被后续样式 reset 或 normalize 干扰；特别留意
animation、transform、display这三个属性是否被父容器意外覆盖 - 如果用构建工具（如 Webpack/Vite），推荐把 SpinKit 的 SCSS 版本导入后，用
$prefix变量统一控制前缀，比手动替换更可靠
IE11 下多数 SpinKit 动画根本不会动
SpinKit 官方明确标注“IE10+ support”，但实际测试中，IE11 对 @keyframes 的解析有严重缺陷：它不支持 transform: rotate(0deg) scale(0) 这类多值写法，也不识别 animation-timing-function: cubic-bezier(...) 中的高精度小数，导致关键帧卡在第一帧。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 加载图标静止不动，或只闪一下就消失
- 控制台无报错，但 DevTools 里能看到
animation属性被标为无效（invalid）
实操建议：
- 对 IE11 单独提供降级方案，比如用
sk-circle的 SVG 版本（SpinKit 提供了 SVG 示例），或改用纯 CSS border-animation（如sk-fading-circle的简化版） - 避免在 IE11 环境下使用带
scale+rotate组合的动画（如sk-chasing-dots），这类几乎全军覆没 - 如果必须支持，可借助
postcss-cssnext或autoprefixer的 legacy 模式补全部分兼容性，但不能解决核心 keyframes 解析问题
Vue/React 里直接用 SpinKit HTML 片段容易重复渲染失效
SpinKit 是纯 CSS 实现，依赖元素存在且 class 名准确。但在 Vue 的 v-if 或 React 的条件渲染中，组件频繁挂载/卸载会导致浏览器来不及触发 animation，或者动画中途被强制重置。
使用场景：
- 按钮点击后显示 loading，请求完成即隐藏
- 列表滚动加载新数据时，在底部插入 loading 元素
实操建议：
- 不要用
v-show或visibility: hidden控制显隐——这会让动画持续运行，浪费 CPU - 改用
opacity: 0; pointer-events: none;配合transition，既保持 DOM 存在，又避免干扰交互 - 在 React 中，若用
useState控制 loading 显隐，确保 class 名拼接逻辑不产生空格或重复（如className={`sk-folding-cube ${loading ? 'active' : ''}`}）
自定义颜色和尺寸不能只改 color 属性
SpinKit 多数动画靠 border-color、background、box-shadow 实现，不是单靠 color。比如 sk-wandering-cubes 用的是 border-top-color 和 border-left-color，改 color 完全无效。
参数差异：
-
sk-rotating-plane：改background -
sk-double-bounce：需同时改两个子元素的background，且第二个要加animation-delay才能同步 -
sk-three-bounce：三个子元素颜色不同，延迟也不同，漏一个就会节奏错乱
性能影响：
- 用
box-shadow模拟多个点（如sk-cube-grid）时，改颜色不影响性能；但加filter: hue-rotate()会触发全图重绘，低端机明显掉帧 - 放大尺寸建议用
transform: scale()，别直接调width/height——后者会改变布局流，引发重排
真正麻烦的是动画节奏：每个 Spinner 的 animation-duration 和 animation-timing-function 都是手工调出来的，微调颜色没问题，但动时间函数或周期，大概率让“优雅”变“抽搐”。这点没人提，但你试三次就懂了。
