css动漫效果库,Animate.css功能强大的纯CSS3动画库 - 资源分享

Animate.css是一个CSS3动画库，他为我们预设了很多可以使用的动画效果，比如弹跳、飘过、滑动、渐变的等特效，简单好用，只需要添加对应的动画Class到元素上，即可调用插件的动画效果，而且支持跨浏览器使用。

使用方法

1、先下载插件，你可以在Github上找到，然后引入到我们的项目中：

2、将类动画添加到您想要动画的元素中。您还可能希望将类infinite包含到无限循环中。可支持的动画类列表

bounce

flash

pulse

rubberBand

shake

headShake

swing

tada

wobble

jello

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

bounceOut

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

flipInX

flipInY

flipOutX

flipOutY

lightSpeedIn

lightSpeedOut

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

hinge

jackInTheBox

rollIn

rollOut

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp

slideInDown

slideInLeft

slideInRight

slideInUp

slideOutDown

slideOutLeft

slideOutRight

slideOutUp

这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。

3、如果说想给某个元素动态添加动画样式，可以通过jquery来实现：

$('#yourElement').addClass('animated bounceOutLeft');

4、当动画效果执行完成后还可以通过以下代码添加事件

$('#yourElement').one('webkitAnimationEnd MSAnimationEnd', doSomething);

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

$(function(){

$('#demo').addClass('animated bounce');

});

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

$(function(){

$('#demo').addClass('animated bounce');

setTimeout(function(){

$('#demo').removeClass('bounce');

}, 1000);

});

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

#demo{

animate-duration: 2s; //动画持续时间

animate-delay: 1s; //动画延迟时间

animate-iteration-count: 2; //动画执行次数

}

相关链接