在CSS中动画有三种方式
1：transition补间动画
2：@keyframe关键帧动画
3：逐帧动画
说这三种方式之前先了解一下一些名词
补间动画：补间动画指的是做FLASH动画时，在起始帧和结束帧中间需要
做“补间动画”，才能实现图画的运动；插入补间动画后两个关键帧之间
的插补帧是由计算机自动运算而得到的。
关键帧动画：就是给需要动画效果的属性，准备一组与时间相关的值，
这些值都是在动画序列中比较关键的帧中提取出来的，而其他时间帧中
的值，可以用这些关键值，采用特定的插值方法计算得到，从而达到比
较流畅的动画效果。
逐帧动画，是一种动画技术，其原理即将每帧不同的图像连续播放，
从而产生动画效果
1：transition补间动画
语法：transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
2：@keyframe关键帧动画（Animation）
语法：当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
1：规定动画的名称。2：规定动画的时长
| 值 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst //这里的名称必须和animation定义的名称相同
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Transiton和Animation的区别
1.Animation可以通过keyframe显示控制当前帧的属性值，
而Transition只能隐式来进行（不能指定每帧的属性值）
，所以相对而言Animation的功能更加灵活。
2. Animation通过模拟属性值改变来实现动画，动画结束之后
元素的属性没有变化；而Transiton确实改变了元素的属性值，
动画结束之后元素的属性发生了变化；这一点，这在实际应用
中会产生很大的区别。
3：逐帧动画
说这个之前先来说一下什么是steps（）
==steps() 是 Animation 中的一个 timing-function 函数， 能够实现动画的阶跃式变化，而非两个状态间的线性过渡。 ==
steps() 接收两个参数：
steps ( n, [start | end] )
第一个参数是一个正值，指定动画分割的段数
第二个参数定义动画执行开始点，可设定为 start 或 end，这个值为可选值，当未传入参数时默认以 end 方式执行
具体使用方法以及案例可以参考W3Cschool里面的逐帧动画
