CSS动画——实现波浪摇摆效果...

一、效果展示

以下主要实现四个动画：

元素上下摇摆动画波浪上下摇摆动画气泡上升及消失动画连续气泡右飘动画

二、实现思路

这里主要讲一下波浪上下摇摆动画和连续气泡右飘动画的实现思路

这里拿一张波浪图来举例解释实现波浪动画的思路：

波浪的摇摆实际上是通过波浪图的左右移动实现的，因此我们只需写一个实现波浪图从右(左)到左(右)移动的动画即可，但是在实现循环移动的动画中会存在一个问题，波浪图向左移动后，将移出屏幕边界，并且右侧会空出来，因此我们在盒子内放两张相同的波浪图，一张初始位置在屏幕内，一张在屏幕右侧，当第一张向左移动时，第二张紧跟着一起移动实现弥补原本的空出来的位置，这样就可以实现波浪上下摇摆的动画效果了。

连续气泡右飘动画实现原理：

先写一个气泡水平方向向右移动、垂直方向先下后上、气泡宽高从0变大、透明度在50%时从1变为0的动画，再复制5个相同的气泡，给每个气泡不同的动画延时-delay，但是每个气泡之间的延时时长必须相同。

三、参考代码