关键帧动画

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

 

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

　　第一步：

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

@-webkit-keyframes move {
    70% {
        left:0%;
        top:124px;
    }
    80% {
        left:0%;
        top:160px;
    }
    100% {
        left:24.87%;
        top:0px;
    }
}
@keyframes move {
    70% {
        left:0%;
        top:124px;
    }
    80% {
        left:0%;
        top:160px;
    }
    100% {
        left:24.87%;
        top:0px;
    }
}

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

　　第二步：

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

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

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

　　第三步：

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

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

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

　　第四步：

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

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

    });

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