关于小米
27岁，山西运城人，职业电商经理人，前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发，等相关电商工作，经验较为丰富，小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]
E-mail:mzze@163.com
Q Q:32362389
W X:xiaomi168527
关于王飞
27岁，山西运城人，职业电商经理人，网络工程师兼运维，从事过运营商网络建设，企业网络建设、优化。数据中心网络维护等通过，经验丰富，座右铭：当自己休息的时候，别忘了别人还在奔跑。 ...[更多]
关于小艳
大于花一样的年龄，河南郑州是我家，2010年在北京接触团购网，2011年进入天猫淘宝一待就是四年，如今已经将设计走向国际化（ps:误打误撞开始进入阿里巴巴国际站的设计，嘿嘿）五年电商设计，丰富经验，从事过天猫淘宝阿里各项设计，店铺运营，产品拍摄；我将我的经历与您分享是我的快乐！座右铭：越努力越幸运！ ...[更多]
E-mail:97157726@qq.com
Q Q:97157726
animation动画属性是CSS3的核心属性之一，它把之前必须flash或者JS才能做出来的效果通过css3都可以做出来， animation动画属性学好了可以延伸很多很特别的效果，让你的网站从此脱颖而出，下面由小米总结66种CSS3animation动画例子分享给大家，希望给正在CSS3学习路上的前端工作者给予帮助：
CSS3：animation兼容性：IE6 IE7 IE8 IE9不支持
(想重新看效果刷新即可：)
调用方法：首先
下载animate.min.css，复制链接下载: https://pan.baidu.com/s/1mg0CLvE 密码: ykbb
其次，在标签class里面加入animated rotateOut,其中animated是必加选项，rotateOut参照如下的效果添加；如：
<div class="animated rotateOut">rotateOut</div>
OK！大功告成！查看效果吧
补充：
其他效果：
1、magic.css：https://www.bbsxiaomi.com/case/css3donghua/magic_css.html(点击查看)
2、CSS3字体动画效果：animate.css https://www.bbsxiaomi.com/case/css3donghua/animate.css.html(点击查看)
3、国外button【扭曲按钮】效果（水滴） https://www.bbsxiaomi.com/case/css3donghua/button-shuidi/ 更多效果 查看https://tympanus.net/codrops/
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>www.bbsxiaomi.com - 小米技术社区让你尖叫的CSS3动画效果</title> <meta name="description" content="让你尖叫的CSS3动画效果"> <meta name="keywords" content="让你尖叫的CSS3动画效果"> <link href="https://www.bbsxiaomi.com/case/css/animate.min.css" rel="stylesheet"> <style> div{float:left;margin:0 4% 30px 0;width:10%;background:red;height:100px;text-align:center;}/* by www.bbsxiaomi.com */ h1{text-align:center;color:#333;} </style> </head> <body> <h1 class="animated zoomInLeft">www.bbsxiaomi.com 小米技术社区CSS3动画效果</h1> <div class="animated bounce" >bounce</div> <div class="animated hinge">hinge</div> <div class="animated flash">flash</div> <div class="animated pulse">pulse</div> <div class="animated rubberBand">rubberBand</div> <div class="animated shake">shake</div> <div class="animated swing">swing</div> <div class="animated tada">tada</div> <div class="animated wobble">wobble</div> <div class="animated bounceIn">bounceIn</div> <div class="animated bounceInDown">bounceInDown</div> <div class="animated bounceInLeft">bounceInLeft</div> <div class="animated bounceInRight">bounceInRight</div> <div class="animated bounceInUp">bounceInUp</div> <div class="animated bounceOut">bounceOut</div> <div class="animated bounceOutDown">bounceOutDown</div> <div class="animated bounceOutLeft">bounceOutLeft</div> <div class="animated bounceOutRight">bounceOutRight</div> <div class="animated bounceOutUp">bounceOutUp</div> <div class="animated fadeIn">fadeIn</div> <div class="animated fadeInDown">fadeInDown</div> <div class="animated fadeInDownBig">fadeInDownBig</div> <div class="animated fadeInLeft">fadeInLeft</div> <div class="animated fadeInLeftBig">fadeInLeftBig</div> <div class="animated fadeInRight">fadeInRight</div> <div class="animated fadeInRightBig">fadeInRightBig</div> <div class="animated fadeInUp">fadeInUp</div> <div class="animated fadeInUpBig">fadeInUpBig</div> <div class="animated fadeOut">fadeOut</div> <div class="animated fadeOutDown">fadeOutDown</div> <div class="animated fadeOutDownBig">fadeOutDownBig </div> <div class="animated fadeOutLeft">fadeOutLeft</div> <div class="animated fadeOutLeftBig">fadeOutLeftBig</div> <div class="animated fadeOutRight">fadeOutRight</div> <div class="animated fadeOutRightBig">fadeOutRightBig</div> <div class="animated fadeOutUp">fadeOutUp</div> <div class="animated fadeOutUpBig">fadeOutUpBig</div> <div class="animated animated.flip">animated.flip</div> <div class="animated flipInX">flipInX</div> <div class="animated flipInY">flipInY</div> <div class="animated flipOutX">flipOutX</div> <div class="animated flipOutY">flipOutY</div> <div class="animated lightSpeedIn">lightSpeedIn</div> <div class="animated lightSpeedOut">lightSpeedOut</div> <div class="animated rotateIn">rotateIn</div> <div class="animated rotateInDownLeft">rotateInDownLeft</div> <div class="animated rotateInDownRight">rotateInDownRight</div> <div class="animated rotateInUpLeft">rotateInUpLeft</div> <div class="animated rotateInUpRight">rotateInUpRight</div> <div class="animated rotateOut">rotateOut</div> <div class="animated rotateOutDownLeft">rotateOutDownLeft</div> <div class="animated rotateOutDownRight">rotateOutDownRight</div> <div class="animated rotateOutUpLeft">rotateOutUpLeft</div> <div class="animated rotateOutUpRight">rotateOutUpRight</div> <div class="animated hinge">hinge</div> <div class="animated rollIn">rollIn</div> <div class="animated rollOut">rollOut</div> <div class="animated zoomIn">zoomIn</div> <div class="wow animated zoomInDown">zoomInDown</div> <div class="wow animated zoomInLeft">zoomInLeft</div> <div class="wow animated zoomInRight">zoomInRight</div> <div class="wow animated zoomInUp">zoomInUp</div> <div class="wow animated zoomOut">zoomOut</div> <div class="wow animated zoomOutDown">zoomOutDown</div> <div class="wow animated zoomOutLeft">zoomOutLeft</div> <div class="wow animated zoomOutRight">zoomOutRight</div> <div class="wow animated zoomOutUp">zoomOutUp</div> <script src="https://www.bbsxiaomi.com/case/js/wow.min.js"></script> <script> if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ new WOW().init(); }; </script> <!-- by www.bbsxiaomi.com 小米技术社区 --> </body> </html>
本站内容均为小米原创，转载请注明出处：小米技术社区>> 超炫！66种 css3 animation动画属性案例赏析
