在CSS关键帧中使用transform-origin实现无限轨迹的问题

你的思路方向是对的，但单纯通过切换transform-origin+旋转无法形成连贯的∞轨迹，核心问题在于没有同步控制元素的位置来匹配旋转中心的切换，且旋转角度的重置导致运动衔接断裂。下面是修正后的实现方案：

正确实现代码 #

:root {
  --sphere-dim: 50px;
  --orbit-radius: 100px; /* 控制∞轨迹的大小 */
}

.sphere {
  position: absolute;
  width: var(--sphere-dim);
  height: var(--sphere-dim);
  background: rgb(183, 162, 159);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中定位 */
  animation: infinityPath 4s linear infinite;
}

@keyframes infinityPath {
  0%, 100% {
    /* 初始状态：绕右侧圆心，位于圆心下方 */
    transform-origin: calc(100% + var(--orbit-radius)) 50%;
    transform: translate(-50%, -50%) rotate(0deg) translate(0, var(--orbit-radius));
  }
  25% {
    /* 绕右侧圆心旋转半圈，到达圆心上方 */
    transform-origin: calc(100% + var(--orbit-radius)) 50%;
    transform: translate(-50%, -50%) rotate(180deg) translate(0, var(--orbit-radius));
  }
  25.01% {
    /* 切换旋转中心到左侧圆心，保持位置衔接 */
    transform-origin: calc(-1 * var(--orbit-radius)) 50%;
    transform: translate(-50%, -50%) rotate(180deg) translate(0, var(--orbit-radius));
  }
  50% {
    /* 绕左侧圆心旋转半圈，到达圆心下方 */
    transform-origin: calc(-1 * var(--orbit-radius)) 50%;
    transform: translate(-50%, -50%) rotate(360deg) translate(0, var(--orbit-radius));
  }
  50.01% {
    /* 切回右侧圆心，衔接后续运动 */
    transform-origin: calc(100% + var(--orbit-radius)) 50%;
    transform: translate(-50%, -50%) rotate(360deg) translate(0, var(--orbit-radius));
  }
  75% {
    /* 再次绕右侧圆心旋转半圈，回到上方 */
    transform-origin: calc(100% + var(--orbit-radius)) 50%;
    transform: translate(-50%, -50%) rotate(540deg) translate(0, var(--orbit-radius));
  }
  75.01% {
    /* 切换到左侧圆心 */
    transform-origin: calc(-1 * var(--orbit-radius)) 50%;
    transform: translate(-50%, -50%) rotate(540deg) translate(0, var(--orbit-radius));
  }
}

实现原理 #

1. 双圆心旋转：∞轨迹由两个相切的圆组成，通过在关键帧中切换transform-origin，让元素分别绕右侧和左侧的虚拟圆心旋转。
2. 位置同步：用translate(0, var(--orbit-radius))让元素始终保持在旋转圆心的圆周上，确保轨迹符合圆形路径。
3. 无缝衔接：在切换旋转中心的瞬间（如25.01%、50.01%），保持旋转角度和位移的连续性，避免运动跳变。
4. 居中定位：通过初始的translate(-50%, -50%)让元素整体居中，方便调整轨迹位置。

原代码的核心问题 #

1. 仅依赖旋转而没有配合位移，元素是绕自身边缘旋转，无法形成完整的圆周轨迹。
2. 切换transform-origin时直接重置rotate(0deg)，导致运动状态断裂，无法衔接成∞形状。

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