本文详解如何用纯 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); } } NEN
? 关键要点解析：
立即学习“前端免费学习笔记（深入）”；
- 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。