在jQuery提供方便的接口的今天，我们很容易就可以利用API ：animate（）来实现动画。不知道大家发现了没有在animate（）的参数中的第一项是一个式样集合，不知道大家是不是和我有同样的疑问：为什么不直接添加一个类而是式样集合呢？我猜测是因为animate（）函数只能处理有限的属性，或是相关于尺寸的属性，只有这些属性才能有过度效果。

 

　　其实要想实现动画，我们还有另一种方法，就是用CSS3提供的“”。它可以将动画通过进度百分数，划分为多个阶段，分别为每一个阶段定义不同的状态（式样），再封装成类。我们要做的仅仅是把这个类添加到目标元素上。以让物体移动为例，下面我们一起来看看如何实现关键帧动画。

　　第一步：

　　我们要定义关键帧效果，即确定动画进度中不同阶段的效果（式样）。我们根据这些式样编写 @keyframes

1 @-webkit-keyframes move { 2     70% { 3         left:0%; 4         top:124px; 5     } 6     80% { 7         left:0%; 8         top:160px; 9     }10     100% {11         left:24.87%;12         top:0px;13     }14 }15 @keyframes move {16     70% {17         left:0%;18         top:124px;19     }20     80% {21         left:0%;22         top:160px;23     }24     100% {25         left:24.87%;26         top:0px;27     }28 }

　　注意：为了兼容不同浏览器，如果有需要我们要添加前缀以兼容。我们会有多个相同的关键帧组。

　　第二步：

　　有了针效果，我们就要封装成类以方便调用，同时我们要配置动画属性：

1 .animation_move { 2     /* 定义CSS3动画 */ 3     -webkit-animation-name: move; /*动画名字，与keyiframes结合使用*/ 4     -webkit-animation-duration: 400ms; /*动画持续时间*/ 5     -webkit-animation-timing-function: ease-out; /*动画播放方式，当前为线性*/ 6     -webkit-animation-delay: 400ms;/* 动画延时开始时间 */ 7     -webkit-animation-direction: 'normal'; /* 播放方向 */ 8     /* -webkit-animation-play-state: 'running';  播放状态 */ 9     10     animation-name: move;11     animation-duration: 400ms;12     animation-timing-function: ease-out;13     animation-delay: 400ms;14     animation-direction: 'normal';15 }

　　我们在动画类中分别配置了两种前缀的动画属性，这和之前的关键帧组是一一对应的。

　　第三步：

　　我们的动画已经完成了90%；接下来，我们要做的只是在需要的时候将这个类（animation_move）添加到目标元素上就可以了。不同的js库有不同的方法，我仅给出jQuery的方法：

$("#id").addClass("animate_move");

　　这样动画就启动了。但是，动画的过程并没有到此为止。

　　第四步：

　　回调。关键帧动画也是有回调的。但是这个回调针对的并不是动画，而是加载动画的元素。

$("#id").bind('oanimationend animationend webkitAnimationEnd' ,function(){        //回调函数的函数体    });

　　如果你在元素上加载了不止一个动画，你可以在回调中把自己的bind给unbind掉。再添加下一个动画的回调，和下一个动画。