原文网址(我的博客):http://shanmao.me/web/css3-2/css3-shi-xian-ge-zhong-dong-hua-lei-shou-cang
官方网站和demo:http://daneden.me/animate/
本站demo: http://shanmao.me/wp-content/uploads/2012/12/test1.html 使用方法: [code lang="html"]</pre>
<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