偏移路径

此属性最初名为 motion-path。 此属性以及所有其他相关的 motion-* 属性，在 规范 中正在重命名为 offset-*。 我们正在年鉴中更改这些名称。 如果你现在想使用它，最好使用两种语法。

CSS 中的 offset-path 属性定义元素在动画期间遵循的运动路径。 以下是一个使用 SVG 路径语法的示例

.thing-that-moves {
  /* "Old" syntax. Available in Blink browsers as of ~October 2015 */
  motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
 
  /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */
  offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
}

此属性不能进行动画，而是定义动画的路径。 我们使用 motion-offset 属性创建动画。 以下是一个使用 @keyframes 动画对 motion-offset 进行动画的简单示例

.thing-that-moves {
  offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
  animation: move 3s linear infinite;
}

@keyframes move {
  100% { 
    motion-offset: 100%;   /* Old */
    offset-distance: 100%; /* New */
  }
}

查看 CodePen 上 CSS-Tricks (@css-tricks) 的 沿路径进行动画的简单示例。

在此演示中，橙色圆圈沿着我们在 CSS 中设置的 offset-path 进行动画。 我们实际上用完全相同的 path() 数据在 SVG 中绘制了该路径，但这对于获取运动来说并不是必需的。

假设我们在某个 SVG 编辑软件中绘制了这样的奇特路径

我们会找到这样的路径

<path d="M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z" />

我们想要的是 d 属性值，我们可以直接将其移至 CSS 并将其用作 offset-path

查看 CodePen 上 CSS-Tricks (@css-tricks) 的 zEpLRo。

请注意路径语法中的无单位值。 如果你将 CSS 应用于 SVG 中的元素，这些坐标值将使用该 SVG 的 viewBox 中设置的坐标系。 如果你将运动应用于其他 HTML 元素，这些值将为像素。

还要注意我们使用了指向的手指图形来显示元素如何自动旋转以使其有点朝前。 你可以使用 offset-rotate 控制这一点。

.mover {
  offset-rotate: auto; /* default, faces forward */
  offset-rotate: reverse; /* faces backward */
  offset-rotate: 30deg; /* set angle */
  offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */
}

值

据我们所知，path() 和 none 是 offset-path 的唯一有效值。

offset-path 属性应该接受以下所有值。

• path()：在 SVG 坐标语法中指定路径
• url：引用用作运动路径的 SVG 元素的 ID
• basic-shape：根据 CSS 形状规范 指定形状，其中包括
  • circle()
  • ellipse()
  • inset()
  • polygon()

  顺便说一下，Clippy 是一个很棒的工具，可以生成基本形状值。

• none：指定根本没有运动路径

以下是一些测试

查看 CodePen 上 CSS-Tricks (@css-tricks) 的 motion-path 值测试。

即使告诉 SVG 元素通过 url() 引用同一个 SVG 中定义的路径，似乎也不起作用。

使用 Web Animations API

Dan Wilson 在 未来用途：CSS 运动路径 中探讨了其中的一些内容。 你可以通过 Web Animations API 在 JavaScript 中访问所有这些相同的内容。 例如，假设你在 CSS 中定义了一个 offset-path，你仍然可以通过 JavaScript 控制动画

查看 CodePen 上 CSS-Tricks (@css-tricks) 的 CSS 运动路径。

更多示例

注意！ 其中许多是在将 motion-* 命名更改为 offset-* 之前创建的。 如果你愿意，修复它们应该非常容易。

查看 CodePen 上 Merih Akar (@merih) 的 嗖！。

查看 CodePen 上 Eric Willigers (@ericwilligers) 的 pJarJO。

查看 CodePen 上 Kseso (@Kseso) 的 赛车道上的赛车。

查看 CodePen 上 Ali Klein (@AliKlein) 的 CSS 运动路径飞机。

查看 CodePen 上 一丝 (@yisi) 的 CSS 沿 SVG 路径进行动画。

查看 CodePen 上 Dan Wilson (@danwilson) 的 运动路径无限。

查看 CodePen 上 Dan Wilson (@danwilson) 的 CSS 运动路径螺旋。

查看 CodePen 上 一丝 (@yisi) 的 zGzJYd。

浏览器支持

在撰写本文时，offset-path 属性仍被视为实验性功能。 如果当前缺乏浏览器支持让你犹豫是否要在项目中使用它，那么你可能需要考虑使用 GSAP 来执行此级别的动画，莎拉也在 她的文章 中介绍了这一点。 目前，这将为你提供最广泛的浏览器支持。

从 Chrome 46 和 Opera 33（以及相关的移动版本）开始，我们在 Blink 中获得了“初始支持”（没有标志）。

还有其他方法吗？

我们自己的 Sarah Drasner 写了关于 SMIL 的文章，SMIL 是 SVG 的原生动画方法，以及如何使用 animateMotion 沿 SVG 路径对对象进行动画。 它看起来像

<animateMotion 
  xlink:href="#lil-guy" 
  dur="3s" 
  repeatCount="indefinite" 
  fill="freeze" 
  path="M 25,50 C 37.5,25 37.5,25 50,0 75,50 75,50 100,100 50,100 50,100 0,100 12.5,75 12.5,75 25,50 Z" />

但 SMIL 已被弃用！ 所以不建议这样做。

GreenSock 也是另一种推荐的方法。 莎拉在 GSAP + SVG for Power Users: Motion Along A Path （SVG 不是必需的）中介绍了这一点。 示例

查看 CodePen 上 Sarah Drasner (@sdras) 的 autoRotate true/false 演示。

相关属性

• offset-distance
• offset-rotate
• offset-position
• offset-anchor

附加信息

• 规范: 运动路径模块级别 1 规范
• CodePen 上的示例集
• 未来使用: CSS 运动路径 由 Dan Wilson
• 运动路径 – 过去、现在和未来 由 Cassie Evans
• WebKit 工单 #139128
• Mozilla 工单 #1186329
• Microsoft Edge 功能请求
• Chrome 平台状态: CSS 运动路径 和 示例
• MDN: motion (链接到其他相关属性)