元素不动最常见原因是未设置animation属性或animation-name与@keyframes名称不一致；必须显式声明animation且duration不能为0，否则动画静默失效。
用 @keyframes 定义旋转动画时，为什么元素不动？
最常见原因是没给元素设置 animation 属性，或者漏了 animation-name 与 @keyframes 名称不一致。CSS 动画不会自动触发，必须显式绑定。
-
@keyframes只是定义动画帧，不是调用动画 - 名称必须完全匹配（区分大小写），比如
@keyframes spin对应animation-name: spin - 至少要指定
animation-duration，否则默认为0s，看起来就是静止的 - 别忘了加
animation-iteration-count: infinite，否则只转一圈就停
旋转 Loading 的关键 CSS 属性组合
一个可用的无限旋转 Loading，核心在于控制「起始状态」「变化逻辑」和「播放行为」。下面是最简可靠写法：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.loading-spinner {
width: 24px;
height: 24px;
border: 2px solid #eee;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
-
border-radius: 50%是画圆的前提，否则矩形边框转起来不直观 - 用
border-top-color单独设色，能做出“缺口旋转”效果，比全色更符合 Loading 直觉 -
linear让转速均匀；用ease-in-out反而显得卡顿 - 别依赖
transform-origin默认值（50% 50%），除非你明确要偏移旋转中心
在不同场景下适配旋转动画的注意事项
实际项目中，Loading 常嵌在按钮、卡片或全屏遮罩里，容易因父容器样式干扰旋转表现：
- 如果父元素有
overflow: hidden，且 spinner 尺寸靠transform: scale()放大，可能被裁剪——优先改用width/height调整尺寸 - Flex 或 Grid 容器中，确保 spinner 没被设成
align-self: flex-start等导致定位偏移，影响视觉中心感 - IE10+ 才支持
@keyframes，若需兼容 IE9，得回退到 GIF 或 JS 动画方案 - 移动端要注意
transform触发硬件加速：加transform: translateZ(0)可提升流畅度，但非必需
为什么用 rotate(360deg) 而不用 rotate(0deg) 回到起点？
表面上看，from { rotate(0deg) } → to { rotate(0deg) } 也该循环，但浏览器动画引擎会优化掉“无变化”的帧，导致动画失效。必须让终点与起点在数值上不同，才能触发重绘。
-
rotate(360deg)和rotate(0deg)视觉等价，但数值不同，可被识别为有效过渡 - 也可以写成
0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }，语义更清晰 - 避免用大角度如
rotate(720deg)，虽然可行，但某些旧版 Android WebView 有插值异常
animation-duration 和 infinite 的组合缺一不可，以及 border 圆角和单色边框的搭配——少了这两点，哪怕 keyframes 写对了，看起来也不像 Loading。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
