在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掉。再添加下一个动画的回调，和下一个动画。