Css3实现各种动画类收藏

最新推荐文章于 2024-01-11 21:03:30 发布

weixin_33973600

最新推荐文章于 2024-01-11 21:03:30 发布

阅读量199

点赞数

文章标签： python

原文链接：https://my.oschina.net/shanmao/blog/93872

版权

2019独角兽企业重金招聘Python工程师标准>>>

原文网址（我的博客）：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>

<pre>
[/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

转载于:https://my.oschina.net/shanmao/blog/93872