本文详解如何用纯 css 让文本或任意元素沿完美圆形轨迹匀速运动，重点解决初始/结束位置“跳变”问题，并提供可复用的代码模板与关键原理说明。
实现元素沿圆形路径运动的核心在于复合变换（rotate + translateX + rotate⁻¹）：先绕父容器中心旋转，再沿 X 轴平移至圆周，最后反向旋转以保持元素自身朝向不变。你原始代码中跳变的根本原因在于：.element 使用了 position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%) 进行居中，而动画中的 translateX(150px) 是相对于该已偏移的坐标系执行的——导致动画起始点并非圆心，造成视觉突兀。
✅ 正确做法是将动画容器与内容分离，并确保动画起点自然落在圆周上：
#spin {
position: absolute;
top: 50%;
left: 50%;
/* 圆心锚点：通过 transform-origin 隐式固定在 (0,0)，
再用 translate(-50%, -50%) 将自身中心对齐到父级 50%/50% */
transform: translate(-50%, -50%);
animation: orbit 4s linear infinite;
}
@keyframes orbit {
from {
transform: translate(-50%, -50%) rotate(0deg) translateX(150px) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg) translateX(150px) rotate(-360deg);
}
}<div id="spin"> <p>NEN</p> </div>
? 关键要点解析：
- translate(-50%, -50%) 必须保留在 keyframes 中（而非仅写在基础样式里），否则 from 状态会缺失该偏移，导致第一帧瞬间跳转；
- rotate(-360deg) 在 to 中用于抵消旋转累积，使文字始终正向显示（不随轨道翻转）；
- 使用 animation-timing-function: linear 保证匀速运动，避免缓动造成的速度不均；
- infinite 可实现循环，如需单次执行，改为 forwards 并删除 infinite；
- 半径由 translateX(150px) 控制（可替换为 translateY() 实现垂直圆、或 translate(150px, 0) 更清晰）；若需响应式半径，建议改用 calc() 或 CSS 自定义属性（如 --radius: 150px）。
? 进阶提示：若需多个元素同步绕同一圆运动，可为每个子元素设置不同 animation-delay，或使用 rotate() 配合 transform-origin 直接定位（适用于静态布局）。但动态路径动画仍推荐上述复合变换方案——它语义清晰、兼容性好（支持所有现代浏览器及 IE10+），且完全无需 JavaScript。
立即学习“前端免费学习笔记（深入）”；
