如何快速完成css动画

先上结论，主要用到offset-path和offset-distance，这两个属性目前Safari和IE不支持，如果对兼容性要求不高的话可以使用本文介绍的这种方法。

完成动画的几种主要方法

1. 使用css3的transition或者animation再结合如width，height，top，left，或者translate这类的的css属性，也就是我们说的“手写动画”。
2. 使用js引擎完成。如three.js等。

这两者相比，前者在复杂情况下做出的动画可能不够精细，而且运动轨迹基本靠盲试，后者有学习成本。所以我在项目中用到了一种新的方法：

1. 给目标动画元素添加offset-path以设定动画轨迹，值为path(xxx)，括号内为svg代码，这个在ui都是能提供svg图的(运动轨迹的svg，如模拟一个行星在椭圆轨道上运动，我们就需要一个椭圆轨道背景图的svg形式)
2. 然后我们需要在svg代码中提取出关键的path代码，如果svg是很"规则的形式"
   如<ellipse id="path-3" cx="369.203008" cy="56.8721805" rx="369.203008" ry="56.8721805"></ellipse>这种，我们也可以借助这个网站转换获取path代码，再将得到的path填入offset-path的path值中
3. 给目标动画元素添加animation，关键帧描述的属性为offset-distance。
   具体看看兼容性(截至2021.2)
   

   offset-path

offset-distance

再上我实际应用中的效果图

两侧的黄色箭头和三个椭圆虚线上的小球都是这种动画完成的

(gif图太大可能会显示不出来，可以看下面代码自行尝试，另外打开f12我发现了两件事，一个是简书的文章页已经彻底转为了react，再就是生产环境并没有隐藏consolelog，也有可能简书用了某种插件吧)

在椭圆轨道上运动的小球css代码如下

<!-- 第一层底部曲线及两个球 -->
<div class="ellipse1"></div>
<div class="ellipse-ball ellipse1-ball ellipse-ball1"></div>
<div class="ellipse-ball ellipse1-ball ellipse-ball2"></div>

.ellipse1-ball{
    position: absolute;
    top: 105px;
    left: 21px;
    offset-path:path('M0 56.8721805a369.203008 56.8721805 0 1 0 738.406016 0a369.203008 56.8721805 0 1 0 -738.406016 0z');
  }
.ellipse-ball{
    width: 18px;
    height: 18px;
    background: url('~@/assets/imgs/index/ellipse_ball.svg');
  }
.ellipse-ball1{
    animation: ellipsePoint 20s linear infinite;
  }
@keyframes ellipsePoint {
    0%   {offset-distance: 0%;}
    100% {offset-distance: 100%;}
}

反着转的小球动画 
@keyframes ellipsePointReverse {
    0%   {offset-distance: 50%;}
    100% {offset-distance: -50%;}
}

可以看到这种动画的写法比之前的两种简单的不少，关键的运动轨迹交给了svg来实现，唯一的缺点就是不兼容mac电脑。不考虑苹果电脑兼容性的可以一试。

参考文章(方法是从同事那学来的，不过张鑫旭老师的文章和工具对我有更详细的指导帮助)使用CSS offset-path让元素沿着不规则路径运动
svg代码转换工具https://www.zhangxinxu.com/sp/path.html