这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战

相信大家波浪动画都见过不少，很多是通过纯css的boder-radius或者clip去实现方式众多，但我们本次用svg去画波浪来讲解其动画的两种方案，第一种是svg animateTransform实现，第二种为svg+css3 animation。先来一睹为快吧：

效果就是这样，接下来我们会从怎么绘制波浪，怎么用animateTransform做动画，怎么换用css3 animation这些开始讲起，准备好了么，这就出发~

我们先放主容器div.page填充满屏，再将svg.waves填充满宽度并用绝对定位放在最底部，在svg中我们用defs先把波浪path写入当复用组件，在外面用use去引用他这样就出现一个波浪在屏幕最底下。

这就是我们看到的，但很多同学会问path怎么做啊，人力去做的确很费时，这有个简单方法，这里告诉大家一个svg的在线编辑器——svg-path-editor 。我们这里可见即所得，按照自己心意做绘制就可以拿到想要的路径信息了。

我们在use里面写入animateTransform标签，type表示要更改的属性，他和css3一样都有translate属性来改变为宜，from(translateX,translateY)到 to(translateX,translateY)来更改，dur是其动画周期，repeatCount是重复次数，indefinite表示无限次。

就是利用这么简单的一句话，我们就实现了波浪动画了。但是我们这个方案也是有弊端的，就是animateTransform本身兼容性还是不尽人意，而且控制起来灵活度不如css3 animation。

我们为了这些使用了三条波浪，然后我们在css中定义了animation也是做 translate位移的动画，但是我们可以定义延时属性将他们错位播放，好了虽然不是一行，但也很简单就完成了。

css3 animation操作多个元素的做不同延时的动画非常的容易，而且动画本身各项属性也容易扩展，至于兼容性也会好一些，非要说缺点的话，就是多写几行代码。

我们通过以上学习了svg怎么实现动画的两种方案。css3相信大家都已经非常熟练了，但svg本身或许是很多同学的盲区，往后肯定要多多练习一下哦。如果英文比较好的可以康康w3c的svg文档，这里讲述的最为完全。