元素不动是因为未设置 display: inline-block/block 且缺少宽高；纯 span 等 inline 元素无渲染盒，animation 不生效；需显式设 width、height，并用 border-radius: 50% 和单色 border 搭配 rotate() 实现旋转圆环。
用 @keyframes 定义旋转动画时，为什么元素不动？
常见原因是没给元素设 display: inline-block 或 block，且没指定宽高。animation 对 display: inline 的元素（如纯 span）默认不生效，因为没有尺寸和渲染盒。
- 必须显式设置
width和height，哪怕只是20px - 推荐用
border搭配border-color: transparent来画单色圆环，比background更易控制旋转中心 -
animation-timing-function选linear，避免默认的ease造成启停卡顿
纯 CSS 实现「圆圈旋转」最简写法
不需要伪元素、不需要额外 DOM 节点，一个元素 + 一段 CSS 就够：
.loading {
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-top-color: #333;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
关键点：border-top-color 单独设色，配合 border-radius: 50% 形成「缺口圆」；transform: rotate() 绕自身中心转，无需 transform-origin（默认就是 center）。
在 Flex / Grid 布局里居中显示总偏移？
因为 animation 不影响文档流，但元素本身尺寸会参与布局计算。如果父容器是 display: flex，直接加 margin: auto 最可靠：
立即学习“前端免费学习笔记（深入）”；
- 别依赖
text-align: center—— 对块级loading元素无效 - 别用
position: absolute+top/left: 50%—— 容易脱离上下文，尤其在 Modal 或动态高度容器里错位 - Flex 场景下，父元素加
justify-content: center; align-items: center是最稳解法
IE11 兼容时 rotate() 动画失效？
IE11 支持 @keyframes，但对 transform 的写法敏感：它不认 rotate(360deg) 缩写，必须补全前缀 + 完整函数名。
- 加
-ms-transform: rotate(360deg)到@keyframes里 - 主选择器也要加
-ms-animation，且值顺序不能乱：-ms-animation: spin 1s linear infinite - 注意 IE11 不支持
transform: rotateZ()，只认rotate()
现代项目若已放弃 IE，这段前缀可删；但只要还跑在政务、银行等老系统里，漏掉 -ms- 就真不会转。
