如何在HTML5 CSS3轨道动画中新增初始位置不同的行星元素？

嘿，我完全明白你要的效果——你不想让元素等几秒再转，而是希望它们从轨道上不同的位置同时开始旋转对吧？animation-delay用正数确实达不到这个效果，不过咱们有两个超好用的办法解决这个问题：

方法1：使用负的animation-delay（推荐） #

负的延迟值会让动画立刻启动，但直接跳转到动画时间线的某个中间位置开始播放，完美实现“初始位置不同但同时旋转”的需求。

修改后的CSS代码 #

.saturn {
  position: absolute;
  left: 315px;
  top: 143px;
  /* 现代浏览器已支持标准动画写法，可省略旧前缀 */
  animation: myOrbit 4s linear infinite;
}

@keyframes myOrbit {
  from {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

/* 用负延迟设置不同初始位置 */
.saturn-pos-90 {
  /* 4秒动画时长，-1秒相当于从动画1/4处开始（对应90度位置） */
  animation-delay: -1s;
}

.saturn-pos-180 {
  /* 从动画1/2处开始（对应180度位置） */
  animation-delay: -2s;
}

.saturn-pos-270 {
  /* 从动画3/4处开始（对应270度位置） */
  animation-delay: -3s;
}

对应的HTML代码 #

<div class="logo_carousel"> 
  <img id="logo_center" src="logo.png"> 
  <!-- 第一个元素：从初始0度位置开始旋转 -->
  <img class="saturn" src="logo1.png"> 
  <!-- 第二个元素：从90度位置开始旋转 -->
  <img class="saturn saturn-pos-90" src="logo2.png"> 
  <!-- 可选：添加第三个元素，从180度位置开始旋转 -->
  <img class="saturn saturn-pos-180" src="logo3.png"> 
</div>

原理说明

• 正数animation-delay是让动画延迟启动，元素会在初始位置等待指定时间后才开始运动；
• 负数animation-delay是让动画立即启动但跳过前N秒的动画内容，元素一开始就处在动画运行N秒后的位置，然后继续完成剩余的动画循环。

方法2：直接设置元素的初始transform偏移 #

如果不想用延迟值，也可以给每个元素设置初始的旋转偏移，让它们一开始就处在轨道的指定位置，然后动画会从该位置继续旋转。

修改后的CSS代码 #

.saturn {
  position: absolute;
  left: 315px;
  top: 143px;
  animation: myOrbit 4s linear infinite;
}

@keyframes myOrbit {
  from {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

/* 给不同元素设置初始轨道位置 */
.saturn-pos-90 {
  transform: rotate(90deg) translateX(150px) rotate(-90deg);
}

.saturn-pos-180 {
  transform: rotate(180deg) translateX(150px) rotate(-180deg);
}

对应的HTML代码 #

<div class="logo_carousel"> 
  <img id="logo_center" src="logo.png"> 
  <img class="saturn" src="logo1.png"> 
  <img class="saturn saturn-pos-90" src="logo2.png"> 
  <img class="saturn saturn-pos-180" src="logo3.png"> 
</div>

原理说明

这里的初始transform和动画关键帧里的写法一致，只是把旋转角度改成你需要的初始位置，动画启动后会从这个位置开始，沿着轨道继续完成360度旋转。

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