这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

【motion path】 是个什么东西？我想肯定是你看到它的第一反应，没错，这次我又准备写一篇关于冷门但是实用的css属性的博客，另一篇请移步clip-path属性的探秘之旅

接下来请随我一起探索这个牛逼但冷门的属性吧

详解【motion path】

【motion path】 翻译过来就是 运动路径，它是一个规范，其中定义了元素如何进行运动的属性。我们利用它可以控制元素按照特定的路径进行位置变换并且这个路径可以是非常复杂的一条路径，从这里的描述其实就可以知道这个规范很不简单

说到元素如何位置变换，我相信你脑海里的第一反应肯定是借助transform、top | left | bottom | right、margin之类可以改变物体位置的属性来实现，没错，这也是目前常规做法(老方法🤪)，接下来以一个基础的位置变换为例(效果如下)，讲解新老方式的区别

老方法😑

废话不多说，直接上代码！

<div></div>


/* top | left | bottom | right */
div{
  width: 100px;
  height: 100px;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  animation: move 1s linear infinite alternate;
}
@keyframes move {
  100% {
    top:100px;
    left:100px;
  }
}
/* transform */
div{
  width: 100px;
  height: 100px;
  background-color: black;
  animation: move 1s linear infinite alternate;
}
@keyframes move {
  100% {
    transform: translate(100px,100px);
  }
}
/* margin */
div{
  width: 100px;
  height: 100px;
  background-color: black;
  animation: move 1s linear infinite alternate;
}
@keyframes move {
  100% {
    margin: 100px 0 0 100px;
  }
}

对于这些“老方法”，我相信你已经烂熟于胸了，所以接下来就该本文的主角 motion path 出场了

新方法【motion path】😍

motion path 定义了5个属性，列举如下

offset-path：接收一个SVG路径（与SVG的path、CSS中的clip-path类似），指定运动的路径
offset-distance：控制当前元素基于 offset-path 运动的距离
offset-position：指定 offset-path 的初始位置
offset-anchor：定义沿 offset-path 定位的元素的锚点，这个也算好理解，运动的元素可能不是一个点，那么就需要指定元素中的哪个点附着在路径上进行运动。通常而言，沿着路径运动的是物体的几何中心点（类比 transform-origin），举个栗子，比如想让元素左下角的点沿着路径运动时，我们可以设置 offset-anchor: 0 100%;
offset-rotate：定义沿 offset-path 定位时元素的方向，说人话就是运动过程中元素的角度朝向

通过对各个属性的描述，我们大概知道了它们各自的含义与用法，那么接下来就使用 motion path 来实现上述的效果吧，上代码！

<div></div>


div {
  width: 100px;
  height: 100px;
  background: black;
  offset-rotate: 0deg;
  offset-path: path("M 0 0 L 100 100");
  animation: move 1s linear infinite alternate;
}
@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

解释下上述代码的含义：offset-path 接收一个 SVG 的 path 路径，这里我们的路径内容是一条自定义路径 path("M 0 0 L 100 100")，翻译过来就是从 0 0 点运动到 100px 100px 点，运动轨迹为一条直线

其实这个示例是完全不能体现出 motion path 的强大，因为在这个示例中我们只是简单定义了一条直线的路径，但是其实这条路径可以是任意的形式(折线、曲线...)，唯一存在的限制就是我们的想象力

下面以折线路径为例，感受下 motion path 的强大，先上代码

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(#fc0, #f0c);
  offset-rotate: 0deg;
  offset-path: path("M 0 0 L 100 0 L 200 0 L 300 100 L 400 0 L 500 100 L 600 0 L 700 100 L 800 0"); /* 只改变运动路径 */
  animation: move 2000ms linear infinite alternate;
}
@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

这里我们定义了一个如下所示的路径

最终效果如下

最后说明一下，offset-path 属性值里面的坐标参考系为运动元素的容器元素，以容器元素的左上角为原点，x轴向右逐渐增大，y轴向下逐渐增大，同时需要注意的是坐标值是代表运动元素的 offset-anchor 的位置，而不是运动元素左上角点的位置

【motion path】的兼容性

通过上文的讲解，我们可以知道 motion path 非常强大，借助它可以实现很多牛逼的效果，但是在web领域，往往是越牛逼的属性和方法，兼容性越差

它与clip-path属于难兄难弟，都是因为兼容性的问题无法发光发亮，哎，说多了都是泪，我们还是具体看下 motion path 的兼容性吧

可以看到ie和safari全系不支持，哎😞

结语

其实css里还存在很多牛逼且实用的属性，只是因为兼容性的问题被雪藏，但我相信随着前端领域的不断发展，旧时代的很多东西都是会被淘汰掉的

因此我相信这些牛逼的属性总会发光，只是还需要一点时间罢了，好啦，就写这么多啦，完结，撒花🎉

参考

探秘神奇的运动路径动画 Motion Path

一点小小的请求

既然都看到这里啦，如果你喜欢我的文章，那么请动动你的手指，帮我的文章点个赞或收个藏，xdm的支持是我创作的最大动力，自己单机真不好玩！

最近自己搭建了个人博客，上面会最先发布我写的文章，希望感兴趣的小伙伴都去逛逛，如果能评论留言就更好啦，嘿嘿，期待你们的光临哦~

你听说过css的【motion path】吗？

详解【motion path】

老方法😑

新方法【motion path】😍

【motion path】的兼容性

结语

参考

一点小小的请求

推荐阅读