css3动画库animate.css的详细使用教程

在这个年代，你要是不懂一点点css3的知识，你都不好意思说你是个美工，前端工程师，攻城尸了。如果说那些是我们的必备技能，当然是CSS3了。
从广义上来讲，css3动画可以分为两种。一种叫过渡（transition）动画，就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形（transform）等等这些属性。css过渡只能定义首和尾两个状态，所以是最简单的一种动画。
另外一种叫做关键帧（keyframes）动画。不同于第一种的过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧来说的话，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。关键帧动画的定义方式也比较特殊，它使用了一个关键字@keyframes来定义动画。
这两种动画都可以在我们的博客中找到相关的学习文章。我们今天主要学习的是CSS3的动画库animate.css的使用。
Animate.css是一个有趣的来自国外的CSS3动画库，跨浏览器的css3动画库。当然是只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。
使用步骤如下：
1.首先引入animate.css样式文件

<link href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css" rel="stylesheet">

2.在元素标签上加入class
如在下面div上加入animated bounce刷新即可产生动画。animated 类似于全局变量，它定义了动画的持续时间；bounce是动画具体的动画效果的名称，你可以选择任意的效果。如果动画是无限播放的，可以添加class infinite。

<div class="animated bounce" id="xttblog"></div>

也可以通过jQuery等插件添加动画

$(function(){
    $('#xttblog').addClass('animated bounce');
});

3.如果动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将class删除，比如：

$(function(){
    $('#xttblog').addClass('animated bounce');
    setTimeout(function(){
        $('#xttblog').removeClass('bounce');
    }, 1000);
});

animate.css的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：

#xttblog{
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}

4、如果需要在动画效果执行完成后进行其他操作可以通过下面方式添加事件和方法

$('#xttblog').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    //动画执行完成了
});

注意添加浏览器前缀。以下列举了animate.css的所有动画：
shake、flash、swing、bounce、tada、wobble、pulse
flip、flipInX、flipOutX、flipInY、flipOutY
fadeIn、fadeInUp、fadeInDown、fadeInLeft、fadeInRight、fadeInUpBig、fadeInDownBig、fadeInLeftBig、fadeInRightBig
fadeOut、fadeOutUp、fadeOutDown、fadeOutLeft、fadeOutRight、fadeOutUpBig、fadeOutDownBig、fadeOutLeftBig、fadeOutRightBig
slideInDown、slideInLeft、slideInRight、slideOutUp、slideOutLeft、slideOutRight
bounceIn、bounceInDown、bounceInUp、bounceInLeft、bounceInRight
bounceOut、bounceOutDown、bounceOutUp、bounceOutLeft、bounceOutRight
rotateIn、rotateInDownLeft、rotateInDownRight、rotateInUpLeft、rotateInUpRight
rotateOut、rotateOutDownLeft、rotateOutDownRight、rotateOutUpLeft、rotateOutUpRight
lightSpeedIn、lightSpeedOut、hinge、rollIn、rollOut

版权声明：本文为博主原创文章，未经博主允许不得转载。