定义动画：
@keyframes 动画名{
from{ 初始状态 }
to{ 结束状态 }
}
调用：
animation: 动画名称 持续时间；
其中，animation属性的格式如下：
animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
animation: move1 1s alternate linear 3;
animation: move2 4s;
定义动画的格式举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>.box{width:100px;height:100px;margin:100px;background-color:red;/* 调用动画*//* animation: 动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。infinite 表示无限次*//*animation: move 1s alternate linear 3;*/animation: move2 4s;}/* 方式一：定义一组动画*/
@keyframes move1 {from{transform: translateX(0px) rotate(0deg);}
to {transform: translateX(500px) rotate(555deg);}
}
/* 方式二：定义多组动画*/
@keyframes move2 {0%{transform: translateX(0px) translateY(0px);background-color:red;border-radius:0;}
25% {transform: translateX(500px) translateY(0px);}/*动画执行到 50% 的时候，背景色变成绿色，形状变成圆形*/
50% {/* 虽然两个方向都有translate，但其实只是Y轴上移动了200px。 因为X轴的500px是相对最开始的原点来说的。可以理解成此时的 translateX 是保存了之前的位移 */transform: translateX(500px) translateY(200px);background-color:green;border-radius:50%;}
75% {transform: translateX(0px) translateY(200px);}/*动画执行到 100% 的时候，背景色还原为红色，形状还原为正方形*/
100% {/*坐标归零，表示回到原点。*/transform: translateX(0px) translateY(0px);background-color:red;border-radius:0;}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
注意好好看代码中的注释。
效果如下：
我们刚刚在调用动画时，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:100pxauto;transform-origin:centerbottom;/* 旋转的中心点是底部 */animation: myClock 60s steps(60) infinite;}
@keyframes myClock {0%{transform: rotate(0deg);}