动画是CSS3中具有颠覆性的特征，可通过设置多个节点 来精确控制一个或一组动画，常用来实现复杂的动画效果。
1、定义动画的步骤
（1）通过@keyframes定义动画；
（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
（3）在指定元素里，通过 animation 属性调用动画。
之前,我们在 js 中定义一个函数的时候，是先定义，再调用：
js 定义函数： function fun(){ 函数体 } 调用： fun();
同样，我们在 CSS3 中定义动画的时候，也是先定义，再调用：
定义动画： @keyframes 动画名{ from{ 初始状态 } to{ 结束状态 } } 调用： animation: 动画名称 持续时间；
其中，animation属性的格式如下：
animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) animation: move1 1s alternate linear 3; animation: move2 4s;
定义动画的格式举例：
注意好好看代码中的注释。
效果如下：
2、动画属性
我们刚刚在调用动画时，animation属性的格式如下：
animation属性的格式如下：
animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) animation: move1 1s alternate linear 3; animation: move2 4s;
可以看出，这里的 animation 是综合属性，接下来，我们把这个综合属性拆分看看。
（1）动画名称：
animation-name: move;
（2）执行一次动画的持续时间：
animation-duration: 4s;
备注：上面两个属性，是必选项，且顺序固定。
（3）动画的执行次数：
animation-iteration-count: 1; //iteration的含义表示迭代
属性值infinite表示无数次。
（3）动画的方向：
animation-direction: alternate;
属性值：normal 正常，alternate 反向。
（4）动画延迟执行：
animation-delay: 1s;
（5）设置动画结束时，盒子的状态：
animation-fill-mode: forwards;
属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。
（6）运动曲线：
animation-timing-function: ease-in;
属性值可以是：linear ease-in-out steps()等。
注意，如果把属性值写成steps()，则表示动画不是连续执行，而是间断地分成几步执行。我们接下来专门讲一下属性值 steps()。
steps()的效果
我们还是拿上面的例子来举例，如果在调用动画时，我们写成：
animation: move2 4s steps(2);
效果如下：
有了属性值 steps()，我们就可以作出很多不连续地动画效果。比如时钟；再比如，通过多张静态的鱼，作出一张游动的鱼。
step()举例：时钟的简易模型
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 3px; height: 200px; background-color: #000; margin: 100px auto; transform-origin: center bottom; /* 旋转的中心点是底部 */ animation: myClock 60s steps(60) infinite; } @keyframes myClock { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div></div> </body> </html>
上方代码，我们通过一个黑色的长条div，旋转360度，耗时60s，分成60步完成。即可实现。
效果如下：
