上面是附件示例，为了懒省事没仔细测试兼容，请用最新版Chrome或Firefox查看。发现发布后会有点乱，大家可以下载附件查看
终于结束了繁忙的加班期，突然闲下来还真有点不适应，就学了下CSS3新增的@keyframes动画，在这里和大家分享下
@keyframes的好处是不需要gif图片、js或flash，虽然很简单，但同样很有趣。在网页上加个小小的动画肯定会增色不少。
使用方法：
@keyframes animationName{
from {background: #f00;}
to {background: #ff0;}/*from、to相当于定义动画的开始和结束帧，进行过度。也可用0%-100% */
}
定义好了动画效果，剩下的就只需要绑定到div元素就OK了
div{
animation: animationName 1s;/*必备的两个属性：动画名称和时长，时长默认为0*/
}
animation 属性是一个简写属性，用于设置六个动画属性：
animation-duration 动画时长
时长单位可以为s（秒）或ms（毫秒）；默认为0
animation-timing-function 速度曲线
animation-delay 动画延迟
可为单位为s（秒）或ms（毫秒）的数值。表示动画延迟多久开始，或者说多久后开始播放，所以如果动画为多次播放或循环只对第一次有效，第二次播放是没有延迟的。
可为负值，如animation-delay：-2s，表示跳前两秒直接进入动画。
animation-iteration-count 播放次数
可以为数值，代表播放多少次；或infinite，表示无限循环
animation-direction 是否反向播放
默认为normal，正常播放。值为alternate则会反向播放
好怪的编辑器，每次审核后都多好多换行
