通过 CSS3，我们能够创建动画 animation，一个非常有意思的东西。它在许多网页中取代动画图片、Javascript，甚至简单的Flash 动画，让页面生动起来。
实例
先举个简单的例子：
div {
width:20px;
height:20px;
background:red;
position:relative;
animation:mymove 10s infinite;
-webkit-animation:mymove 10s infinite;
}
@keyframes mymove {
from {left:0px;}
to {left:300px;}
}
@-webkit-keyframes mymove {
from {left:0px;}
to {left:300px;}
}在这个例子里：宽20px、长20px的红色方块，从屏幕左侧left=0的位置，匀速移动到left=300px的位置，并且循环运动。
来，我们来看这里的关键词：
mymove => 动画的名称
10s => 动画执行时间
infinite => 无限次重复
——————————手动分割线——————————
属性
animation:name duration timing-function delay iteration-count direction;
想弄明白animation动画，首先，我们要知道他的几个属性：
1. animation-name
动画的名字，也就是绑定到选择器的 keyframe 名称。
2. animation-duration
动画执行从开始到结束花费的时间，默认是0，如果不设置该属性，就不会有动画效果。
3. animation-timing-function
动画运动速度。这个比较复杂，可以设置为：
· linear：匀速运动
· ease： 这个是默认的效果，低速-高速-低速。
· ease-in： 低速开始
· ease-out： 低速结束
· ease-in-out： 低速开始，低速结束
· cubic-bezier(n,n,n,n)：n可以是0-1的任意值
4. animation-delay
动画延时执行，延迟的时间，默认是0，也可以设置负值。
5. animation-iteration-count
动画播放次数，infinite是无限播放
6. animation-direction
动画反向播出
——————————手动分割线——————————
keyframes
Chrome 和 Safari 需要前缀 -webkit-，
Firefox 需要前缀 -moz-，
Opera 需要前缀 -o-。
注意：Internet Explorer 9 以及更早的版本不支持 animation 属性。
