CSS 中有一个非常有意思的模块 -- CSS Motion Path Module Level 1，翻译过来也就是运动路径。本文将对 motion path 一探究竟，通过本文，你可以了解到：什么是 CSS motion path
使用 CSS motion path 制作简单路径动画
使用 CSS motion path 制作复杂路径动画
什么是 CSS Motion Path 运动路径？
什么是 CSS Motion Path 运动路径？利用这个规范规定的属性，我们可以控制元素按照特定的路径进行位置变换的动画。并且，这个路径可以是非常复杂的一条路径。
在进一步介绍 CSS Motion Path 之前，我们先看看使用传统的 CSS 的能力，我们如何实现路径动画。
CSS 传统方式实现直线路径动画
在之前，我们希望将一个物体从 A 点直线运动到 B 点，通常而言可以使用 transform: translate()、top | left | bottom | right 或者 是 margin 之类的可以改变物体位置的属性。
简单的一个 Demo：
width: 60px;
height: 60px;
background: #000;
animation: move infinite 1s alternate linear;
}
@keyframes move {
100% {
transform: translate(100px, 100px);
}
}
对于简单的从 A 点直线运动到 B 点的效果如下：
CSS 传统方式实现曲线路径动画
当然，CSS 也可以实现一些简单的曲线路径动画的。如果我们希望从 A 点运动到 B 点走的不是一条直线，而是一条曲线，该怎么做呢？
对于一些简单的圆弧曲线路径，还是可以借助一些巧妙的办法实现的，看看下面这个例子。
这次，我们使用了两个元素，子元素是希望被曲线运动的小球，但是实际上我们是通过设定了父元素的 transform-origin，让父元素进行了一个 transform: rotate() 的运动带动了子元素的小球：
position: relative;
width: 10vmin;
height: 70vmin;
transform-origin: center 0;
animation: rotate 1.5s infinite alternate;
}
.g-ball {
position: absolute;
width: 10vmin;
height: 10vmin;
border-radius: 50%;
background: radial-gradient(circle, #fff, #000);
bottom: 0;
left: 0;
}
@keyframes rotate {
100% {
transform: rotate(90deg);
}
}
为了方便理解，在运动的过程中，我让父元素的轮廓显现出来：
这样，我们算是勉强得到了一个非直线路径运动动画，它的实际运动轨迹是一条曲线。
然而，这基本上是之前 CSS 能做到的极限了，使用纯 CSS 的方法，没办法实现更复杂的路径动画，譬如下面这样一条路径动画：
直到现在&#x
