CSS 运动路径

基线 2023

新可用

自 2023 年 8 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能在旧版设备或浏览器中无法使用。

**CSS 运动路径**模块允许作者沿自定义路径为任何图形对象设置动画。

当您希望为沿路径移动的元素设置动画时，以前只能使用平移、位置等动画，这并不理想，并且只能进行简单的移动。使用 offset-path，您可以定义任何您想要的形状的特定路径。然后，通过为 offset-distance设置动画来沿该路径为其设置动画，并可以选择使用 offset-rotate在任何点旋转它。

基本示例

html

<div id="motion-demo"></div>

css

#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

参考

属性

函数

ray()

规范

规范
运动路径模块级别 1 # offset-path-property

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。