记得long long ago要在网页中实现动画，基本都是flash，这flash老大的位置一直到CSS3出现以后开始动摇了，CSS3 animation函数可以说是flash的致命打击，此函数支持主流浏览器，包括支持CSS3的IE浏览器。

animation 参数：

Property	Description	CSS
@keyframes	Specifies the animation	3
animation	A shorthand property for all the the animation properties, except the animation-play-state property	3
animation-name	Specifies the name of the @keyframes animation	3
animation-duration	Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0	3
animation-timing-function	Describes how the animation will progress over one cycle of its duration. Default "ease"	3
animation-delay	Specifies when the animation will start. Default 0	3
animation-iteration-count	Specifies the number of times an animation is played. Default 1	3
animation-direction	Specifies whether or not the animation should play in reverse on alternate cycles. Default "normal"	3
animation-play-state	Specifies whether the animation is running or paused. Default "running"	3

详情大家可以进W3C看看：http://www.w3schools.com/css/css3_animations.asp

例子1：

HTML Code:

<div class="box">
    <span class="a1">从左边渐渐飘入</span>
    <span class="a2">从中间淡入闪动两下，然后淡出</span>
    <span class="a3">从右边渐渐飘入</span>
    <hr  />
    <span class="a4">这个一直永久重复飘动</span>
    <hr />
    <span class="a5">从小变大, 颜色从红变到绿</span>
</div>

CSS Code:

.box { 
    width:500px; 
    height:300px;
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    margin:auto;
    border:3px solid #eee;
    background:#e0e0e0;
    overflow:hidden;
}

span{
    opacity:0;
    display:block;
    height:50px;
    font:bold 14px/50px "宋体";
}

.a1{
    transform:translate(55px);
    -webkit-animation:animations 2s ease-out;
    animation:animations 2s ease-out;
}

@-webkit-keyframes animations{
    0%{-webkit-transform:translate(0);opacity:0;}
    50%{-webkit-transform:translate(30px);opacity:1;}
    70%{-webkit-transform:translate(35px);opacity:1;}
    100%{-webkit-transform:translate(60px);opacity:0;}	    
}

@keyframes animations{
    0%{transform:translate(0);opacity:0;}
    50%{transform:translate(30px);opacity:1;}
    70%{transform:translate(35px);opacity:1;}
    100%{transform:translate(60px);opacity:0;}
}

.a2{
    text-align:center;font-size:26px;
    -webkit-animation:animations2 5s ease-in-out 2s;
    animation:animations2 5s ease-in-out 2s;
}

@-webkit-keyframes animations2{
    0%{opacity:0;}
    40%{opacity:.8;}
    45%{opacity:.3;}
    50%{opacity:.8;}
    55%{opacity:.3;}
    60%{opacity:.8;}
    100%{opacity:0;}
}

@keyframes animations2{
    0%{opacity:0;}
    40%{opacity:.8;}
    45%{opacity:.3;}
    50%{opacity:.8;}
    55%{opacity:.3;}
    60%{opacity:.8;}
    100%{opacity:0;}
}

.a3{
    transform:translate(360px);
    -webkit-animation:animations3 2s ease-out 2s;
    animation:animations3 2s ease-out 2s;
}

@-webkit-keyframes animations3{
    0%{-webkit-transform:translate(360px);opacity:0;}
    50%{-webkit-transform:translate(330px);opacity:1;}
    70%{-webkit-transform:translate(325px);opacity:1;}
    100%{-webkit-transform:translate(300px);opacity:0;}
}

@keyframes animations3{
    0%{transform:translate(360px);opacity:0;}
    50%{transform:translate(330px);opacity:1;}
    70%{transform:translate(325px);opacity:1;}
    100%{transform:translate(300px);opacity:0;}
}

.a4{
    transform:translate(0);
    opacity:1;
    color: blue;
    /* infinite 永久重复 */
    -webkit-animation:animations4 5s linear infinite;
    animation:animations4 5s linear infinite;		
}

@-webkit-keyframes animations4{
    0%{-webkit-transform:translate(0px);}
    100%{-webkit-transform:translate(500px);}
}

@keyframes animations4{
    0%{transform:translate(0px);}
    100%{transform:translate(500px);}
}

.a5{
    transform:translate(0);
    opacity:1;
    -webkit-animation:animations5 8s linear infinite;
    animation:animations5 8s linear infinite;		
}

@keyframes animations5{
    0%{ transform:translate(0px); width:10%; height:10%; background:red; }
    100%{ transform:translate(400px); width:50%; height:50%; background:blue; }
}

@-webkit-keyframes animations5{
    0%{ -webkit-transform:translate(0px); width:10%; height:10%; background:red; }
    100%{ -webkit-transform:translate(400px); width:50%; height:50%; background:blue; }
}

看看效果：http://www.qttc.net/static/demo/20140102/1.html

惊奇吧！一句js代码都不用写，动画效果都是靠css3去实现。以上样式其中有经常有一段@keyframes animations*，这个就是定义动画的地方。如果你玩过flash，那么这个应该最熟悉不过了，flash要实现动画其实就是定义关键帧，然后靠系统自动运算出每两个关键帧之间的动画，不过这运行只能是一个方向上的。

关键帧

比如，你想让一个球从左边移动到右边，可以这么定义关键帧：

基础CSS:

div {
    position:absolute;
    left:0;
    top:0;
    width:50px;
    height:50px;
    animation:moveCell 3s;
}

关键帧可以这么定义：

@keyframes moveCell{
    from{ left:0; }
    to{ left:500px; }
}

就是有两个关键帧，from开始left=0到to结束left=500px，这就完成了一个非常简单的动画，

DEMO http://www.qttc.net/static/demo/20140102/2.html 

如果，你想让这个div不按直线跑，可以多加一个关键，多个关键帧就需要百分比来描述具体位置了，如：

@keyframes moveCell{
	0% { left:0; top: 0; }
	25% { left:0; top:300px; }
	50% { left:500px; top:300px; }
	100% { left:500px; top:0; }
}

DEMO http://www.qttc.net/static/demo/20140102/3.html

animation:moveCell 3s 这里的3s值的是运行动画的时间，这个也类似于flash的时间轴，我们让它从0px到500px需要3秒跑完，就这么写，这个时间越小速度越快，时间越大速度越慢

我们也可以让它重复n次或者永久重复，在animation:moveCell 3s后面加上n次或者永久重复infinite，如让动画重复6次：

animation:moveCell 3s 6;

让动画永久重复：

animation:moveCell 3s infinite;

永久重复DEMO http://www.qttc.net/static/demo/20140102/4.html

我们不仅可以让它跑过去，还能让它原路返回，这很牛叉，alternate属性：

animation:moveCell 3s infinite alternate;

DEMO http://www.qttc.net/static/demo/20140102/5.html

具体更多的大家看手册吧。

最后

上一个DEMO：http://www.qttc.net/static/demo/20140102/6.html

优点：动画的基本特征无非就是：移动，色变，形变，速度，而这几个特征在animation里都能轻松实现，关键帧也都能轻松实现，也能实现多个动画同时play已经各自的出场时间，配合SVG矢量结合这些动作就能搞定大部分动画，并且各大浏览器都能轻松实现。

缺点：复杂的动画需要写大量Code，虽然只是写CSS Code，还有一个致命的缺点就是动画play结束以后它会还原，比如有开场我让一个div从左跑到右，完了就让它停在哪，结果跑完以后它又还原到左边了。

看看这个例子：http://www.qttc.net/static/demo/20140102/2.html