官方网站和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