如何让CSS动画从不同位置启动（太阳系行星轨道动画场景）

核心实现逻辑是利用CSS animation-delay 属性的负值特性：负值延迟会让动画直接从对应时间点的状态开始运行，既不会出现初始等待时间，也能实现自定义初始轨道位置的效果。

• 固定初始位置配置：针对每个行星的公转周期，计算需要的初始角度对应的时长，作为负延迟加入动画属性即可。以示例中的地球为例，公转周期45s，如果需要初始位置为90度（1/4个公转周期），对应延迟为-11.25s，修改后代码如下：

.earthMini {
  border-radius: 50%;
  position: absolute;
  --radius: 1rem;
  top: calc(50% - var(--radius));
  left: calc(50% - var(--radius));
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  background: url("../../planetTextures/earth.jpg") repeat-x;
  background-size: 100% 100%;
  animation: earthOrbit 45s linear infinite -11.25s, translateBackground 50s infinite linear;
}
@keyframes earthOrbit {
  from {
    transform: rotate(0deg) translateX(13rem) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(13rem) rotate(-360deg);
  }
}

• 动态随机初始位置：如果需要每次加载都生成不同的初始位置，可通过JS动态给每个行星元素赋值随机负延迟，数值范围在-公转周期到0之间即可，示例代码如下：

// 遍历所有行星DOM元素
document.querySelectorAll('.planet').forEach(planet => {
  // 从元素自定义属性获取对应公转周期，单位为秒
  const orbitDuration = parseFloat(planet.dataset.orbitDuration);
  // 生成负的随机延迟
  const randomDelay = -Math.random() * orbitDuration;
  // 赋值给元素动画延迟属性
  planet.style.animationDelay = `${randomDelay}s`;
})

给每个行星设置不同的延迟值后，页面加载时所有行星就会直接显示在各自轨道的不同位置，原有动画的运行速度、循环逻辑完全不受影响。

内容的提问来源于stack exchange，提问作者Dylan Bozarth