Animate.css 动画效果框架

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kangkang_style/article/details/88726237

1. 从官网下载
        https://raw.github.com/daneden/animate.css/master/animate.css
2. 通过npm安装
        $ npm install animate.css
3. 使用在线cdn
        https://unpkg.com/[email protected]/animate.min.css

想要使用哪种动画,只需要把通用类animated和相应的类添加到元素上就行了
    动画效果主要有8类:
        1. Attention(晃动效果)
            bounce
            flash
            pulse
            rubberBand
            shake
            headShake
            swing
            tada
            wobble
            jello
        2. bounce(弹性缓冲效果)
            bounceIn
            bounceInDown
            bounceInLeft
            bounceInRight
            bounceInUp
            bounceOut
            bounceOutDown
            bounceOutLeft
            bounceOutRight
            bounceOutUp
        3. fade(透明度变化效果)
            fadeIn
            fadeInDown
            fadeInDownBig
            fadeInLeft
            fadeInLeftBig
            fadeInRight
            fadeInRightBig
            fadeInUp
            fadeInUpBig
            fadeOut
            fadeOutDown
            fadeOutDownBig
            fadeOutLeft
            fadeOutLeftBig
            fadeOutRight
            fadeOutRightBig
            fadeOutUp
            fadeOutUpBig
        4. flip(翻转效果)
            flip
            flipInX
            flipInY
            flipOutX
            flipOutY
        5. rotate(旋转效果)
            rotateIn
            rotateInDownLeft
            rotateInDownRight
            rotateInUpLeft
            rotateInUpRight
            rotateOut
            rotateOutDownLeft
            rotateOutDownRight
            rotateOutUpLeft
            rotateOutUpRight
        6. slide(滑动效果)
            slideInDown
            slideInLeft
            slideInRight
            slideInUp
            slideOutDown
            slideOutLeft
            slideOutRight
            slideOutUp
        7. zoom(变焦效果)
            zoomIn
            zoomInDown
            zoomInLeft
            zoomInRight
            zoomInUp
            zoomOut
            zoomOutDown
            zoomOutLeft
            zoomOutRight
            zoomOutUp
        8. special(特殊效果)
            hinge
            rollIn
            rollOut
            lightSpeedIn
            lightSpeedOut


    循环执行某个动画:
        使用类名infinite配合动画类型循环执行某个动画组合
        实例:
            <h1 class="animated infinite bounce delay-2s">Example</h1>
    
    延迟执行某个动画类名:
        Class Name     Delay Time
        delay-2s         2s
        delay-3s         3s
        delay-4s         4s
        delay-5s         5s
                
    
    动画执行的时长类名:        
        Class Name     Speed Time
            slow         2s
            slower         3s
            fast         800ms
            faster         500ms
   

猜你喜欢

转载自blog.csdn.net/kangkang_style/article/details/88726237