html 路径线条动画,CSS分层动画可以让元素沿弧形路径运动

CSS 的 animations (动画) 和 transitions(变换)擅于实现从点 A 到点 B 的直线运动，运动轨迹是直线路径。给一个元素添加了 animation 或者 transition 以后，无论你如何调整 贝塞尔曲线 ，都无法让它沿着弧形路径运动。你可以通过自定义 timing function 属性，做出弹动的效果，但是它沿着 X 和 Y 轴相对移动的值永远是相同的。

与其使用 JavaScript 实现外观自然的运动，不如尝试用这种简单的方式：分层动画，绕过已有的限制。通过使用两个或多个元素实现动画效果，我们可以更加细粒度地控制某个元素的路径，沿着 X 轴运动使用一种 timing function ，沿着 Y 轴运动使用另一种 timing function 。

问题所在

当我们深入探讨解决方案之前，看看到底问题在哪。CSS animations 和transitions 限制我们只能沿直线路径运动。元素总是沿着点 A 到点 B 的最短路径运动，如果我们另辟蹊径，告诉 CSS 沿着“更好的路径”，而不是“最短路径”运动呢？

用 CSS (开启硬件加速)实现两点之间的运动，最直截了当的方式是使用transform 的 translate 在一定时间内移动某个元素。这就产生了直线运动。在@keyframes 中，我们打算在 (0,0) 和 (100,-100) 间来回运动，见上图例子：

@