无需登录 数据私有 本地保存

CSS motion-path 路径动画演示 - 元素沿路径运动

11
0
0
0
🚀
慢 快 1×
0% 100%
📍 offset-distance: 0.0%

常见问题与知识点

offset-path（曾用名 motion-path）是 CSS Motion Path 规范的核心属性，用于定义元素在平面上运动的轨迹路径。它支持多种路径定义方式：

• circle() / ellipse() — 圆形和椭圆形路径
• path() — 使用 SVG 路径语法定义任意复杂轨迹
• polygon() — 多边形路径
• url() — 引用外部 SVG 元素作为路径

配合 offset-distance（0%~100%）和 offset-rotate，可以实现完全可控的元素路径动画。

传统 transform: translate() 动画只能沿直线或通过关键帧近似曲线，复杂路径需要大量关键帧。而 offset-path 原生支持任意曲线路径，只需定义一条路径，元素即可精确沿其运动，代码更简洁、性能更好。

此外，offset-rotate: auto 能让元素自动跟随路径切线方向旋转（如火箭始终指向飞行方向），这是传统方法难以实现的。

• auto — 元素自动旋转，使其朝向与路径切线方向一致（如过山车车厢沿轨道转向）
• auto <angle> — 在自动旋转基础上叠加固定角度偏移，如 auto 90deg
• <angle> — 固定旋转角度，如 0deg 保持元素原始朝向不变
• reverse — 与路径方向相反，元素"倒着走"

在本演示工具中，你可以切换"自动"和"固定"模式直观感受区别。

CSS Motion Path 在现代浏览器中获得广泛支持：
• Chrome 55+ / Edge 79+ ✅ 完整支持
• Firefox 72+ ✅ 完整支持
• Safari 16+ ✅ 完整支持
• iOS Safari 16+ ✅ 完整支持

对于旧版浏览器（如 Safari 15），可能需要 -webkit-offset-path 前缀。截至2024年，全球超过94%的用户浏览器已原生支持该特性。

典型应用场景包括：
• 🎢 页面滚动引导线 — 元素沿曲线路径随滚动移动
• ✨ 加载动画 — 粒子沿环形或自定义路径旋转
• 🗺️ 地图路线展示 — 标记点沿路线轨迹移动
• 🎮 游戏元素 — 敌人/道具沿预设路径巡逻
• 📊 数据可视化 — 数据点沿图表路径运动

基本用法：offset-path: path('M...'); animation: move 3s linear infinite; @keyframes move { 0%{offset-distance:0%} 100%{offset-distance:100%} }

offset-path 中的坐标相对于元素自身的包含块（containing block）。对于绝对定位元素，包含块是最近的 position: relative 祖先元素。

本演示中，舞台容器使用 position: relative，路径坐标（如 circle(155px at 325px 220px)）以容器左上角为原点。元素使用 position: absolute，其运动完全由 offset-path 和 offset-distance 决定，无需手动设置 top/left。
🔧 相关工具