CSS Motion Path offset-path 与路径动画实践

CSS Motion Path offset-path 与路径动画实践概述CSS Motion Path 通过 `offset-path` 等属性让元素沿着路径（包含 `path()`/`url(#id)`/形状）运动，避免大量 JS 驱动的滚动监听或逐帧计算。核心概念与参数`offset-path`：定义运动路径（SVG 路径、形状或几何盒），早期称 `motion-path`。`offset-distance`：沿路径的进度（0%–100% 或长度单位）。`offset-rotate`：运动方向与元素旋转（如 `auto 90deg`）。实践示例<style>

.ball { width: 20px; height: 20px; border-radius: 50%; background: #ef4444; }

.ball { offset-path: path('M0,0 C100,0 100,100 200,100'); }

.ball { animation: run 2s ease-in-out infinite alternate; }

@keyframes run { from { offset-distance: 0%; } to { offset-distance: 100%; } }

</style>

<div class="ball" aria-hidden="true"></div>

验证方法浏览器支持：Chrome 85+、Safari 16.2+、Firefox 121+（参考 MDN/CanIUse 与厂商实现）。性能评估：使用合成层动画，避免主线程布局重排；在 DevTools Performance 观察帧率与绘制。回退策略：旧浏览器采用 Web Animations/JS 补充或简化运动轨迹。注意事项在 SVG 坐标系与 CSS 像素坐标间转换时注意视盒与单位差异。控制动画区间与缓动，避免过长或复杂路径影响交互响应。与滚动驱动动画搭配时明确职责，避免双重控制同一元素。