Animate.css动画库的源码分析（大部分都是CSS3.0动画的使用）

由于工作中，时常有的时候需要用到动画特效，自己本身也对CSS3.0的很多动画感兴趣，所以也是不是写一写原始的动画特效，在github上有一个工作中总结的上千种动画特效：点击打开链接，欢迎关注和star。那接下来我们看看我在工作中使用到的这个插件的用法。对于这款动画集合库，网上有大量的教程告诉我们怎么使用它。

首先就是引入我们的Animate.css文件到我们HTML中，然后在要有效果的DOM元素上添加动画样式，首先必须说明的是在每个动画的样式上，都要加入最原始的一个样式animated，然后再加上你需要的动画的样式，有这两个样式，DOM就会有对应的动画效果。

一般我们项目中都是通过jQuery或者原生获取dom的方式获取到dom元素，然后就是通过上述所说的方式给其添加动画。那么接下来我们看看他的源码：其实内部主要是对每个动画名称制作css动画，因为涉及到兼容性问题，所以他添加了很多兼容性的代码，主要是做了谷歌方面的前缀。不过我觉得兼容性越来越不重要。所以我们可以在工作中书写自己的动画库。下面我们看看源码：

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;   //定义一个运动周期的时间
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; //其动画的可见性
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;   
    animation-iteration-count: infinite    //规定动画可以无限次播放
}

主要上述两行代码，对我们的很多动画的初始进行了设置，接下来大部分的代码基本围绕的就是animation动画过程中各个阶段的设置了，使用了css3.0的@keyframes，将css的一种装态逐渐进入另一种状态。使用的是百分比来对整个动画的过程进行精确的设置，使得动画可以掌控在我们手中，我们可以对于动画的每个状态进行控制。其实想要理解其中源代码的含义，大家首先要对css3.0的使用有一定的了解。最起码对于他的很多移动和翻转，延迟，持续时间等等很多特性有了解，这样我们再看它的源码就会很快理解，甚至可以书写出自己想要的个性化的动画。那我们拿出一款样式来具体分析一下，看看到底是如何书写源码的，一个懂了，那么我们对于整个库的代码都会有很大的提升。

@keyframes bounce {
    0%,100%,20%,53%,80% {
        -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1);  //动画的效果，这里使用了贝塞尔曲线
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)   //从最初始的状态
    }

    40%,43% {
        -webkit-transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
        transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
        -webkit-transform: translate3d(0,-30px,0);
        -ms-transform: translate3d(0,-30px,0);
        transform: translate3d(0,-30px,0)  //Y轴方向移动-30px，就是向上移动到30px
    }

    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
        transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
        -webkit-transform: translate3d(0,-15px,0);
        -ms-transform: translate3d(0,-15px,0);
        transform: translate3d(0,-15px,0)   //Y轴方向移动-15px，就是向上移动到15px，也就是向下回落

    }

    90% {
        -webkit-transform: translate3d(0,-4px,0);
        -ms-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0)//Y轴方向移动-5px，就是向上移动到5px，也就是向下回落，然后回到原点
    }
}

从上面的代码中，我们可以看到使用了css3.0的 transform: translate3d的属性。无非是在运动效果的时候使用了贝塞尔曲线，如果大家对这个感兴趣可以看看这个网址 点击打开链接，可以自己实际体验一下贝塞尔曲线的轨迹。我给大家截个图，方便大家学习。

这样我们就对一个简单的上下运动就分析完了。虽然大家感觉很简单，说实话，本身代码也并不是很难，书写的都是我们常用的代码，无非是它结合了很多数学中的运动，把我们的动画做得更加流畅。其他的就是多书写几份这样的代码，主要是考虑到兼容性的问题。接下来我把自己所做的一个完整的实例，给大家参考：放在我的github上面点击打开链接，方便大家一起学习.....与所有前端爱好者共勉......