实例详解css3动画库animate.css的各种动画效果

animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。它的老搭档wow.js,这俩好哥们,经常一起使用。

animate.css包括shake、flash、swing、bounce、tada、wobble、pulse
flip、flipInX、flipOutX、flipInY、flipOutY
fadeIn、fadeInUp、fadeInDown、fadeInLeft、fadeInRight、fadeInUpBig、fadeInDownBig、fadeInLeftBig、fadeInRightBig
fadeOut、fadeOutUp、fadeOutDown、fadeOutLeft、fadeOutRight、fadeOutUpBig、fadeOutDownBig、fadeOutLeftBig、fadeOutRightBig
slideInDown、slideInLeft、slideInRight、slideOutUp、slideOutLeft、slideOutRight
bounceIn、bounceInDown、bounceInUp、bounceInLeft、bounceInRight
bounceOut、bounceOutDown、bounceOutUp、bounceOutLeft、bounceOutRight
rotateIn、rotateInDownLeft、rotateInDownRight、rotateInUpLeft、rotateInUpRight
rotateOut、rotateOutDownLeft、rotateOutDownRight、rotateOutUpLeft、rotateOutUpRight
lightSpeedIn、lightSpeedOut、hinge、rollIn、rollOut等60几种动画,我们下面直接上代码,一一解释它的含义。

下面的所有效果,鼠标移到对应的效果名,就可以看到动画哦……





    
    css3动画库animate.css的各种效果案例详解
    
    


    

animate.css的各种效果

----------------------------------------------关注者(Attention Seekers)----------------------------------------------

shake flash swing bounce tada wobble pulse flip

----------------------------------------------弹进来(Bouncing Entrances)----------------------------------------------

bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp

----------------------------------------------弹出去(Bouncing Exits)----------------------------------------------

bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp

----------------------------------------------淡入(Fading Entrances)----------------------------------------------

fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig

----------------------------------------------淡出(Fading Exits)----------------------------------------------

fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig

----------------------------------------------鸭掌板(Flippers)----------------------------------------------

flip flipInX flipInY flipOutX flipOutY

----------------------------------------------光速(Lightspeed)----------------------------------------------

lightSpeedIn lightSpeedOut

----------------------------------------------旋转进来(Rotating Entrances)----------------------------------------------

rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight

----------------------------------------------旋转出去(Rotating Exits)----------------------------------------------

rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight

----------------------------------------------滑动条(Sliders)----------------------------------------------

slideInDown slideInLeft slideInRight slideOutLeft slideOutRight slideOutUp

----------------------------------------------特殊效果(Specials)----------------------------------------------

hinge rollIn rollOut


截图如下:

实例详解css3动画库animate.css的各种动画效果_第1张图片

实例详解css3动画库animate.css的各种动画效果_第2张图片

你可能感兴趣的:(CSS2/CSS3)