一、效果展示
以下主要实现四个动画：
- 元素上下摇摆动画
- 波浪上下摇摆动画
- 气泡上升及消失动画
- 连续气泡右飘动画
二、实现思路
这里主要讲一下波浪上下摇摆动画和连续气泡右飘动画的实现思路
这里拿一张波浪图来举例解释实现波浪动画的思路：
波浪的摇摆实际上是通过波浪图的左右移动实现的，因此我们只需写一个实现波浪图从右(左)到左(右)移动的动画即可，但是在实现循环移动的动画中会存在一个问题，波浪图向左移动后，将移出屏幕边界，并且右侧会空出来，因此我们在盒子内放两张相同的波浪图，一张初始位置在屏幕内，一张在屏幕右侧，当第一张向左移动时，第二张紧跟着一起移动实现弥补原本的空出来的位置，这样就可以实现波浪上下摇摆的动画效果了。
连续气泡右飘动画实现原理：
先写一个气泡水平方向向右移动、垂直方向先下后上、气泡宽高从0变大、透明度在50%时从1变为0的动画，再复制5个相同的气泡，给每个气泡不同的动画延时animation-delay，但是每个气泡之间的延时时长必须相同。
三、参考代码
https://github.com/WuJianR/animation-pratice
