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

在线预览    源码下载