如何用CSS实现多字母不同半径方向的圆形循环动画？

需要为三字单词（以XYZ为例）制作动画，要求每个字母沿不同半径、不同方向（比如一个向右、一个向左、一个向下）的圆形路径运动后回到初始位置。尝试过多种代码实现但均失败，核心问题是不清楚如何基于固定原点实现圆形动画，希望获得可行的实现方案。

以下是我尝试的部分代码：

<div class="animation-container">
  <div class="letter X">X</div>
  <div class="letter Y">Y</div>
  <div class="letter Z">Z</div>
</div>

.animation-container {
  display: flex;
  position: relative;
  top: 10rem;
  left: 50%;
  align-items: center;
  text-align: center;
}

.letter {
  animation: move-letter 4s ease-in-out infinite;
  animation-iteration-count: infinite;
}

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

要实现每个字母围绕固定原点沿不同圆形路径运动，核心是为每个字母单独配置动画参数（半径、方向），通过嵌套容器固定运动原点，确保动画结束后字母回到初始位置。

优化后完整代码 #

HTML结构

<div class="animation-container">
  <div class="letter-wrapper">
    <div class="letter X">X</div>
  </div>
  <div class="letter-wrapper">
    <div class="letter Y">Y</div>
  </div>
  <div class="letter-wrapper">
    <div class="letter Z">Z</div>
  </div>
</div>

CSS样式

.animation-container {
  display: flex;
  position: relative;
  top: 10rem;
  left: 50%;
  transform: translateX(-50%); /* 让容器真正水平居中 */
  gap: 2rem; /* 字母间预留间距，避免运动时重叠 */
}

/* 作为字母的运动原点容器，固定中心点 */
.letter-wrapper {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.letter {
  font-size: 2rem;
  font-weight: bold;
  position: absolute;
}

/* X字母：向右的圆形路径，半径80px，顺时针运动 */
.X {
  animation: circle-right 4s ease-in-out infinite;
}

@keyframes circle-right {
  0% {
    transform: translateX(80px) rotate(0deg) translateX(-80px);
  }
  50% {
    transform: translateX(80px) rotate(180deg) translateX(-80px);
  }
  100% {
    transform: translateX(80px) rotate(360deg) translateX(-80px);
  }
}

/* Y字母：向左的圆形路径，半径60px，逆时针运动 */
.Y {
  animation: circle-left 4s ease-in-out infinite;
}

@keyframes circle-left {
  0% {
    transform: translateX(-60px) rotate(0deg) translateX(60px);
  }
  50% {
    transform: translateX(-60px) rotate(-180deg) translateX(60px);
  }
  100% {
    transform: translateX(-60px) rotate(-360deg) translateX(60px);
  }
}

/* Z字母：向下的圆形路径，半径100px，顺时针运动 */
.Z {
  animation: circle-down 4s ease-in-out infinite;
}

@keyframes circle-down {
  0% {
    transform: translateY(100px) rotate(0deg) translateY(-100px);
  }
  50% {
    transform: translateY(100px) rotate(180deg) translateY(-100px);
  }
  100% {
    transform: translateY(100px) rotate(360deg) translateY(-100px);
  }
}

关键实现说明 #

• 固定原点：通过.letter-wrapper作为每个字母的运动基准容器，确保字母围绕自身初始位置的中心点运动；
• 自定义路径：调整translateX/Y的数值控制圆形半径，rotate的正负值控制运动方向（正值顺时针，负值逆时针）；
• 回归初始位置：动画从0%到100%完成360度旋转，保证字母最终回到起始坐标；
• 布局优化：添加transform: translateX(-50%)让容器真正水平居中，避免原代码中仅靠左偏移导致的位置偏差。

内容的提问来源于stack exchange，提问作者Thor The dog