如何用CSS实现元素沿圆形路径动画并解决跳转问题

问题原因 #

你当前的代码里，.element初始的transform: translate(-50%, -50%)和动画from状态的rotate(0deg) translateX(150px) rotate(0deg)不匹配，导致动画启动和结束时元素位置跳变。

修复现有代码的方案 #

把居中逻辑抽离到父容器，让元素初始状态和动画起始状态一致：

<div class="orbit-container">
  <div class="element">
    <a>NEN</a>
  </div>
</div>

/* 父容器负责居中 */
.orbit-container {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px; /* 直径等于2倍的圆周半径（150px） */
  height: 300px;
}

.element {
  position: absolute;
  /* 初始状态与动画from一致，消除跳变 */
  transform: rotate(0deg) translateX(150px) rotate(0deg);
  animation: orbit2 4s forwards linear;
}

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

其他实现圆形轨迹动画的方法 #

方法1：旋转父容器（简洁易维护） #

通过旋转包含元素的父容器，让元素自然跟随做圆周运动，无需复杂的transform嵌套：

<div class="orbit-container">
  <div class="element">
    <a>NEN</a>
  </div>
</div>

.orbit-container {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  /* 旋转父容器 */
  animation: orbit-parent 4s forwards linear;
}

.element {
  position: absolute;
  top: 0;
  left: 50%;
  /* 让元素在父容器顶部居中 */
  transform: translateX(-50%);
}

@keyframes orbit-parent {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

方法2：CSS Motion Path（现代直观方案） #

使用CSS偏移路径特性，直接定义圆形轨迹，语法更清晰：

<div class="element">
  <a>NEN</a>
</div>

.element {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 定义圆形路径，半径150px */
  offset-path: circle(150px at center);
  /* 让元素始终保持正立，不随路径旋转 */
  offset-rotate: auto-reverse;
  /* 沿路径移动一圈 */
  animation: move-along-path 4s forwards linear;
}

@keyframes move-along-path {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

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