css3动画animate.css的使用

简介

animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了全部常见的动画效果。

虽然借助 animate.css 可以很方便、快速的制做 CSS3 动画效果，但仍是建议看看 animate.css 的代码，也许你能从中学到一些东西。

在使用animate.css的时候一般都会搭配wow.js,这个另开一个页面来说！

兼容

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

使用方法

一、引入文件

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

二、HTML 及使用

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

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

若是动画是无限播放的，能够添加 class infinite。

你也能够经过 JavaScript 或 jQuery 给元素添加这些 class，好比：

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

有些动画效果最后会让元素不可见，好比淡出、向左滑动等等，可能你又须要将 class 删除，好比：（刚看到有些人直接复制了下边的代码没显示，缘由是没添加触发事件，能够加一个hover/点击事件，把下面的代码复制进去，或者能够直接写

window.onload=function(){

$('#dowebok').addClass('animated bounce');
    setTimeout(function(){
        $('#dowebok').removeClass('bounce');
    }, 1000);//假设这个动画持续时间为1S，而后移除掉，添加其它class

};）

/////////////////////////////////////////////////////////////////////////////////////////////

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

animate.css 的默认设置也许有些时候并非咱们想要的，因此你能够从新设置，好比：

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

注意添加浏览器前缀。

 

下面展现了animate.css里面提供的全部动画类名，你想使用哪一个动画，加上这个类名就好了。

 具体的动画效果请查看animate.css官网  http://www.jq22.com/yanshi819

                                              或者  http://www.dowebok.com/demo/2014/98/

 

shakeflashswingbouncetadawobblepulse

flipflipInXflipOutXflipInYflipOutY

fadeInfadeInUpfadeInDownfadeInLeftfadeInRightfadeInUpBigfadeInDownBigfadeInLeftBigfadeInRightBig

fadeOutfadeOutUpfadeOutDownfadeOutLeftfadeOutRightfadeOutUpBigfadeOutDownBigfadeOutLeftBigfadeOutRightBig

slideInDownslideInLeftslideInRightslideOutUpslideOutLeftslideOutRight

bounceInbounceInDownbounceInUpbounceInLeftbounceInRight

bounceOutbounceOutDownbounceOutUpbounceOutLeftbounceOutRight

rotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRight

rotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRight

lightSpeedInlightSpeedOuthingerollInrollOut