圆周运动需用 translate() 组合关键帧实现，禁用 top/left 百分比和非 linear 缓动；小球须绝对定位居中，无需 transform-origin；响应式推荐 aspect-ratio + calc(--r)。
用 @keyframes 定义圆周运动的 transform 变换
圆周运动本质是「绕中心点旋转 + 半径偏移」，不能只靠 rotate()，否则小球自身会跟着转。正确做法是用 transform: translateX() translateY() rotate() 组合，但更简洁的是用极坐标思想：在每个关键帧中，用 translate() 把小球从原点沿角度推到圆周上。
常见错误是直接写 top/left 百分比位移——这无法构成匀速圆周（三角函数非线性），会导致小球在 0° 和 180° 附近明显变慢。
- 推荐用
transform: translate(var(--tx), var(--ty))配合 CSS 自定义属性动态计算，或直接在@keyframes中硬编码关键角度值（如 0°、90°、180°、270°） - 4 帧足够描述完整圆周；若要更顺滑，可插 8 帧（每 45° 一帧）
- 注意：所有
translate()值必须带单位（如px），0可省略单位，但0.5px不行——CSS 动画不支持 sub-pixel 插值时可能跳变
```css
@keyframes circle-move {
0% { transform: translate(100px, 0); }
25% { transform: translate(0, 100px); }
50% { transform: translate(-100px, 0); }
75% { transform: translate(0, -100px); }
100% { transform: translate(100px, 0); }
}
```
让小球绕容器中心转，必须用 transform-origin 吗？
不需要。真正起作用的是「小球的定位起点」和「动画位移基准」。只要小球本身居中于父容器（比如用 position: absolute; top: 50%; left: 50%），再用 transform: translate() 做相对位移，它自然绕中心转。
transform-origin 在这里反而容易误导：设成 center 对 translate() 无影响；若误设为 0 0，又没配合 transform-box: fill-box，可能让位移原点错位。
- 确保父容器有明确宽高，并设
position: relative - 小球设
position: absolute; top: 50%; left: 50%，再用transform: translate(-50%, -50%)自身居中（抵消自身尺寸） - 动画中的
translate(x, y)是相对于这个居中后的坐标系，x/y 就是半径方向的偏移量
animation-timing-function: linear 是必须的
默认的 cubic-bezier(.25,.1,.25,1)（ease）会让小球在起止点减速，破坏圆周运动的角速度一致性。哪怕你 keyframes 均匀分布，非 linear 的缓动也会让视觉上「卡在四象限交界处」。
- 务必显式声明
animation-timing-function: linear - 不要依赖
animation: name 2s infinite的简写——它隐含ease，必须补全：animation: circle-move 2s linear infinite - 如果还要叠加旋转（比如小球自转），用另一个
transform层叠时，注意浏览器对多个transform函数的合并顺序（matrix 计算），建议统一用单个transform字符串拼接
响应式半径下，用 CSS calc() 或 JS 控制？
纯 CSS 方案可用 calc() + viewport 单位（如 vw），但精度有限：当容器不是正方形时，100vw ≠ 100vh，圆会压扁。此时圆周运动就失真了。
更可靠的做法是：父容器设 aspect-ratio: 1（现代浏览器），再用 % 或 vw 定义半径；或退一步，用 JS 监听 resize，动态更新 --radius 自定义属性。
- 优先用
aspect-ratio: 1 / 1+width: min(80vw, 80vh)锁定正圆容器 - 动画中所有位移值统一用
calc(var(--r) * 1)、calc(var(--r) * 0.707)等，避免重复计算 - IE 不支持
aspect-ratio和calc()在@keyframes中，如需兼容，只能 JS 注入 style 标签重写 keyframes 规则
圆周运动看着简单，实际卡点都在「位移基准是否稳定」「缓动是否干扰角速度」「响应式下半径与容器比例是否同步」——这三个地方一松，动画就飘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
