令人血脉喷张的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即可
上一篇:c#计算 坐标点与坐标点之间的距离


下一篇:win10开始菜单打不开怎么办 win菜单键没反应解决办法