站长素材 css3动画
1、闪光灯
2、弹起
3、摇摆
4、秋千
5、swing
6、疯狂摆动
7、脉冲
8、翻转
9、X轴淡入
10、X轴淡出
11、Y轴淡入
12、Y轴淡出
13、下方淡入
14、上方淡入
15、左边淡入
16、右边淡入
17、底部淡入
18、顶部淡入
19、页面左边淡入
20、页面右边淡入
21、向上淡出
22、向下淡出
23、向左淡出
24、向右淡出
25、顶部淡出
26、底部淡出
27、页面左边淡出
28、页面右边淡出
29、bounceIn
30、bounceInDown
31、bounceInUp
32、bounceInLeft
33、bounceInRight
34、bounceOut
35、bounceOutDown
36、bounceOutUp
37、bounceOutLeft
38、bounceOutRight
39、rotateIn
40、rotateInDownLeft
41、rotateInDownRight
42、rotateInUpLeft
43、rotateInUpRight
44、rotateOut
45、rotateOutDownLeft
46、rotateOutDownRight
47、rotateOutUpLeft
48、rotateOutUpRight
49、hinge
50、rollIn
51、rollOut
52、slideDown
53、slideUp
54、slideLeft
55、slideRight
56、slideExpandUp
57、expandUp
58、bounce
59、pulse
60、bigEntrance
61、expandOpen
62、fadeIn
63、hatch
64、floating
65、tossing
66、pullUp
67、pullDown
68、stretchLeft
69、stretchRight
70、zoomIn
71、zoomInUp
72、zoomInDown
73、zoomInLeft
74、zoomInRight
75、lightSpeedIn
76、lightSpeedOut
建议使用谷歌浏览器或者是使用IE10及以上版本的浏览器
bounceIn
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>bounceIn-站长素材(zzsucai.com)</title> <style> .div { width:300px; height:200px; margin:100px auto; background:url(images/zzsucai.png) } #animation { -webkit-animation:bounceIn 1s .2s ease both; -moz-animation:bounceIn 1s .2s ease both; } @-webkit-keyframes bounceIn { 0% { opacity:0; -webkit-transform:scale(.3) } 50% { opacity:1; -webkit-transform:scale(1.05) } 70% { -webkit-transform:scale(.9) } 100% { -webkit-transform:scale(1) } } @-moz-keyframes bounceIn { 0% { opacity:0; -moz-transform:scale(.3) } 50% { opacity:1; -moz-transform:scale(1.05) } 70% { -moz-transform:scale(.9) } 100% { -moz-transform:scale(1) } } </style> </head> <body> <div id="animation" class="div"></div> </body> </html>
下一条
bounceInDown
