刘学 | skill | 2017-04-29

    最近更新自己的网站时在使用css3的动画功能，感觉有点吃力，每次都要编辑一大堆的代码以及命名，像我这么懒的人一般hold不住的，因此就找了下是否有人专门做成动画库，网上同类的动画库还不少，最后发现还是“animate.css”这个动画库比较简便，就分享出来给大家，下面简述下简介和用法。

简介

    Animate.css是由Dan Eden的Daniel Eden使用CSS3的animation制作的动画效果的CSS集合。 

它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。换句话说：Animate.css就是一大堆的很酷，很有趣，而且很炫又能跨浏览器的动画效果样式集锦，可以直接使用到项目中。

浏览器兼容：

    当然是只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。

使用方法

1、引入文件

<link rel="stylesheet" href="animate.min.css">

2、HTML 及使用

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

给元素加上 class 后，刷新页面，就能看到动画效果了。animated 类似于全局变量，它定义了动画的持续时间；bounce 是动画具体的动画效果的名称，你可以选择任意的效果。

如果动画是无限播放的，可以添加 class infinite。

你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：

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

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

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

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

#yourElement {
  -vendor-animation-duration: 3s;//动画持续时间
  -vendor-animation-delay: 2s;//动画持续时间
  -vendor-animation-iteration-count: infinite;//动画持续时间,infinite为无限循环
}

注意：一定要在CSS恬当的的前缀(webkit, moz,o等)代替“vendor”

语法:

 　　　 animation: name duration timing-function delay iteration-count direction;
　　　　animation-name:     　　　　    规定需要绑定到选择器的 keyframe 名称。。    
　　　　animation-duration: 　　　　    规定完成动画所花费的时间，以秒或毫秒计。    
　　　　animation-timing-function: 　  规定动画的速度曲线。    
　　　　animation-delay:　　　　　　　　  规定在动画开始之前的延迟。    
　　　　animation-iteration-count:     规定动画应该播放的次数。（值：n次，infinite无限循环）    
　　　　animation-direction:　　　　　　 规定是否应该轮流反向播放动画。

官网各种动画的演示地址：animate.css

animate可以到官网下载，可是国内上国外网站经常会歇菜，其中原因你懂的，所以我就上传到百度网盘方便大家下载了，下载链接如下：

animate.css百度网盘下载, 密码:busy

评 论