纯css旋转动画失效的主因是元素无尺寸、不可见或动画属性不全；必须确保宽高明确、有边框/内容、animation属性完整（含infinite），并用transform: rotate()配合transform-origin: center，必要时启用gpu加速。
能用纯 CSS 实现，但必须满足三个硬性条件：元素有明确宽高、有可视觉化的边框或内容、动画属性写全且正确。缺一不可。
为什么加了 animation 却不转？
常见失效不是语法错，而是元素“不可见”或“没尺寸”：
-
div默认是display: block，但无宽高时旋转的是一个 0×0 的点，肉眼看不到 - 只写
transform: rotate(360deg)不会动——它只是静态变换，不是动画 - 漏掉
animation-iteration-count: infinite或缩写里的infinite，结果只转一圈就停了 - 父容器设了
overflow: hidden，而旋转元素因transform-origin偏移导致边缘被裁剪
@keyframes 里该写 rotate() 还是 transform: rotate()？
必须写 transform: rotate()。CSS 动画只能驱动可动画属性，rotate（独立属性）是 Level 4 新特性，兼容性不如 transform 稳定：
- Chrome/Firefox/Edge 115+ 支持
rotate: 360deg，但 Safari 17.4 仍需回退到transform - 若用
transform，务必配transform-origin: center，否则默认绕左上角转 - 关键帧中不要混用
rotate()和transform: scale()等——它们会覆盖，优先级混乱
用 border 画圆环时颜色总对不上？
核心是三边透明 + 一边有色，但透明值在旧 Safari 有渲染偏差：
- 别用
border-color: transparent，改用border-color: rgba(0,0,0,0)兜底 -
border-radius: 50%必须显式声明，否则正方形边框仍是直角 - 宽高必须相等，且不能依赖
font-size或line-height推导——显式写width: 24px; height: 24px - 如果用 Tailwind 的
animate-spin，得确认元素有border（如border-4 border-t-blue-500），否则转的是空气
最易被忽略的点：动画卡顿往往不是代码问题，而是浏览器没触发 GPU 加速。加一句 will-change: transform 或 transform: translateZ(0) 能立刻改善，但别滥用——只加在真正需要旋转的元素上，否则反而拖慢渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
