带37种3D动画特效的跨浏览器CSS3动画框架

AllAnimation.css是一款带37种3D动画特效的跨浏览器CSS3动画框架。它可以轻松的***出各种CSS3 3D动画效果，可以在移动手机上使用。并且使用极其简单，使用时只需要添加相应的class即可。



查看演示
下载插件

　　使用方法
　　使用AllAnimation.css时要引入all-animation.css文件。

<link rel="stylesheet" type="text/css" href="yourpath/all-animation.css" />

复制代码

　　HTML结构

　　你可以使用一个按钮来触发事件，在事件中为指定元素添加相应的动画class。

<div id="animation"></div>

<button class="anny-class">Trigger class, go!</button>

复制代码

　　初始化插件

　　在编写上面的HTML结构之后，可以通过下面的方法来触发CSS3动画。

$(".anny-class").click(function(){

$("#animation").addClass("journal");

});

复制代码

　　或者使用纯JS的方法来编写代码：

document.querySelector('button').addEventListener('click',function(e){

e.preventDefault();

document.querySelector('div').classList.add('dance');

});

复制代码

　　你还可以为动画设置一个定时器。

setTimeout(function(){

$("#animation").addClass("journal");

},2000);

复制代码

　　另外也可以使用jQuery的链式编程方式来取消一个动画在执行另一个动画。

$("#animation").removeClass("journal").addClass("four-rock");

复制代码

　　可用的动画CLASS　　Especiais

　　dance

　　journal

　　pulse

　　pulse-slow

　　jamp

　　four-rock

　　Bounce

　　enter-up-bounce

　　enter-down-bounce

　　enter-right-bounce

　　enter-left-bounce

　　scale-bounce

　　jump-bounce

　　Perspective

　　tree-flip-right

　　tree-flip

　　tree-flip-up

　　tree-flip-down

　　flip-left-bounce

　　rotate-flip

　　flip-right-bounce

　　Fading Entrances

　　flip-top

　　flip-left

　　flip-right

　　flip-bottom

　　Rotate

　　rotate-flip-down

　　rotate-down-bounce

　　rotate-out

　　Agrecives

　　flash-bang

　　bomba

　　本文版权属于jQuery之家