必须用 @keyframes 分离公转和自转动画：公转用 translateX/Y 与 rotate 实现圆形路径，自转用独立 spin 动画；transform-origin 需设为太阳中心坐标；timing-function 优先 linear；避免滥用 will-change。
用 @keyframes 分离自转和公转动画逻辑
行星既要绕太阳转（公转），又要自己转（自转），硬塞进一个 @keyframes 里会失控——比如自转速度被公转周期拖慢，或者旋转轴歪掉。必须拆开：一个动画管轨道位移，另一个管 rotateZ() 或 rotateX()。
实操建议：
- 公转用
transform: translateX()/translateY()配合rotate()实现圆形路径（更稳），别用path()—— 浏览器支持差，且无法和自转叠加 - 自转动画独立定义，例如
@keyframes spin { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } } - 给行星元素同时应用两个
animation：一个走轨道，一个自旋，用逗号分隔，确保animation-fill-mode: forwards各自生效
CSS 中 transform-origin 设错会导致轨道崩坏
公转本质是绕太阳中心做圆周运动，但默认 transform-origin 是元素自身中心。如果没把行星的旋转原点设为太阳位置，rotate() 一动，整个行星就“甩飞”了，而不是乖乖绕圈。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 行星沿对角线直线飞走
- 轨道半径随动画缩放或偏移
- 多个行星互相套叠、错位
正确做法：
- 把太阳设为相对定位容器（
position: relative），行星设为position: absolute - 行星的
transform-origin设为center center（即太阳中心坐标），不是50% 50%—— 后者依赖父容器尺寸，易漂移 - 如果太阳宽高不固定，用
transform-origin: calc(50vw) calc(50vh)这类绝对坐标更可靠
animation-timing-function 用 linear 才符合开普勒定律直觉
虽然真实行星公转是椭圆+变速，但 CSS 动画里用 ease-in-out 反而显得“卡顿”或“犹豫”。人眼习惯匀速圆周运动的视觉节奏，尤其在示意性场景中。
性能与兼容性影响：
-
linear最省 GPU 资源，steps()或贝塞尔曲线会增加合成层负担 - 旧版 Safari 对
cubic-bezier(.2,.6,.4,1)解析不稳定，可能跳帧 - 如果真要模拟近日点加速，宁可用两段
linear动画拼接，也不依赖复杂缓动
示例关键帧写法：
animation: orbit 30s linear infinite, spin 8s linear infinite;
避免用 will-change: transform 过度优化
加了 will-change 后，Chrome 有时会让行星在公转到某角度时突然重绘失真（边缘锯齿、阴影错位），尤其当自转和公转动画时长不成整数倍时。
真正需要它的时候极少：
- 仅当页面有大量其他动画导致掉帧，且已确认该行星是瓶颈
- 只加在最外层轨道容器上，不要每个行星都加
- 务必配合
transform: translateZ(0)强制硬件加速，否则will-change可能反向降级
绝大多数情况，删掉 will-change 反而更稳。
公转动画的麻烦不在写法，在于时间尺度错配——地球一年，金星 225 天，代码里若全用秒级数值，小数点后三位一差，半小时后轨道就偏了 5 度。得用倍数关系控制，而不是硬写具体秒数。
