CSS Motion Path：offset-path 与 offset-distance 的动效实践

---

title: CSS Motion Path：offset-path 与 offset-distance 的动效实践

keywords:

• motion-path
• offset-path
• offset-distance
• offset-rotate
• 路径动画

description: 介绍 CSS Motion Path 的路径与距离语法、元素沿路径移动的动效实现、旋转与方向控制、性能与可访问性建议，并提供示例与参考。

categories:

• 文章资讯
• 编程技术

---

概述

Motion Path 允许元素沿指定路径（SVG path 或基本形状）移动，使用 offset-path/offset-distance/offset-rotate 控制位置与朝向。相比 JS 逐帧计算，原生动画在合成层更高效且更易维护。

示例

<style>
.dot { width: 16px; height: 16px; background: #e11; border-radius: 50%; position: relative; offset-path: path('M0,0 C100,0 100,100 200,100'); animation: move 2s linear infinite }
@keyframes move { to { offset-distance: 100% } }
</style>
<div class="dot"></div>

/* 基本形状作为路径 */
.ring { offset-path: circle(80px at 100px 100px); offset-rotate: auto }

工程建议

• 性能：优先使用可合成属性与关键帧；避免触发布局属性；控制路径复杂度。
• 可访问性：为移动元素提供可替代信息；避免过度动效影响可读性与偏好设置。
• 兼容：特性检测与回退到 transform 路径插值或 JS 动画；验证不同浏览器支持差异。

参考与验证

• MDN Motion Path 文档：https://developer.mozilla.org/docs/Web/CSS/CSS_Motion_Path
• CSS Motion Path 规范草案：https://drafts.fxtf.org/motion-1/
• web.dev 动效与性能指南：https://web.dev/articles/animations-and-performance