令人血脉喷张的animate.css

都说html5、css3是大局是潮流，尽管css3也不难，学起来比较简单，但我还是喜欢他的轻量级集大成者的animate.css框架，初学的小伙伴们加油啦

下面我分析一下animate.css框架里面几个比较经典的特效，话不多说，先上源码！

.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;
animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
这个特效是指初始化的时候浏览器延迟一秒执行
.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}
这个特效是指延迟2秒执行，主要是用到animation-duration属性

.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,
这个是淡出淡入的效果特效，用逗号隔开，写的很经典
.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}
@-webkit-keyframes bouncewww.qianhtj.com{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);
animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);
transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}
70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}
@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);
-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier
(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);
transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}
这个特效就厉害了，是百分之多少的时间时执行什么效果，包括3d和2d变换，效果超级绚丽，如果你可以写出这个效果，那css3算是大牛级别没的说了，主要是

transform:translate3d的结合还集成了不同浏览器的判断。

如果要使用更多的animate特效，就到官方下载直接引入，调用class即可