十一、捕鱼达人的鱼儿游泳动画

一、思路分析

1.鱼儿自身的鱼尾摆动：

设计一个包含鱼尾摆动每一帧动画的长图，通过除css3动画来控制每一帧图片的切换，(将图片定义为背景图片，改变背景图片位置)这样就可以形成鱼尾摆动的视觉效果；

知识点：创建自定义动画@keyframes

语法：第一种 @keyframes 动画名称{   

from{ }

to{ }

}

   第二种 @keyframes 动画名称{

0%{ }

....

100%{ }

}

给元素绑定创建的自定义动画animation

语法：animation:动画名称 执行时间 运动方式 延时 播放次数 是否反向；

                        

         另外animation还有一个属性steps()可以进行动画/过渡分割，有两个参数：第一个参数是一个正值，指定动画分割的段数。第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。start 第一帧是动画结束的时候状态； end 第一帧是动画开始的时候状态；

2.鱼儿的游动轨迹

给鱼包一个外部的框，让鱼儿在框内部摆动，这个框完成移动的动画，形成鱼儿游动的动画；

方法：第一种：animation绑定的自定义动画

              第二种：transform移动动画搭配过渡transition属性

二 、具体代码：