Css3实现各种动画类收藏

官方网站和demo:http://daneden.me/animate/

本站demo: http://shanmao.me/wp-content/uploads/2012/12/test1.html

使用方法:

[code lang=”html”]
<div id="yourElement" class="animated"></div>
[/code]

 

[code lang=”js”]
$("#yourElement").click(function(){//点击实现效果,其他触发效果自己学习
testAnim(‘bounceInRight’);//这里面就是参数,你要实现什么效果就传什么参数
})
function testAnim(x) {
$(‘#yourElement’).addClass(x);
var wait = window.setTimeout( function(){
$(‘#yourElement’).removeClass(x)},
2000
);
}

[/code]

参数参考,可用参数:
Attention seekers:

flash bounce shake tada swing wobble wiggle pulse
Flippers (currently Webkit, Firefox, & IE10 only):

flip flipInX flipOutX flipInY flipOutY
Fading entrances:

fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig
Fading exits:

fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig
Bouncing entrances:

bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight
Bouncing exits:

bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight
Rotating entrances:

rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight
Rotating exits:

rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight
Lightspeed:

lightSpeedIn lightSpeedOut
Specials:

hinge rollIn rollOut

点击下载css
animate-custom