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

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

查看演示    下载插件

　　 使用方法

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

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

复制代码

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

1. <div id="animation"></div>
   
2. 
   
3. <button class="anny-class">Trigger class, go!</button>   

复制代码

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

1. $(".anny-class").click(function(){
   
2.   $("#animation").addClass("journal");
   
3. });      

复制代码

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

1. document.querySelector('button').addEventListener('click',function(e){
   
2.     e.preventDefault();
   
3.     document.querySelector('div').classList.add('dance');
   
4. });     

复制代码

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

1. setTimeout(function(){
   
2. $("#animation").addClass("journal");
   
3. },2000);   

复制代码

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

1. $("#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之家