animate.css动画库的使用

简介：

animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。

首先引入animate.css

animate.css的最新版本是3.7.0，从官网下载
https://raw.githubusercontent.com/daneden/animate.css/master/animate.css
2、通过npm安装
$ npm install animate.css

概述

主要包括

• Attention(晃动效果)
• bounce(弹性缓冲效果)
• fade(透明度变化效果)
• flip(翻转效果)
• lightSpeed(光速效果)
• rotate(旋转效果)
• slide(滑动效果)
• zoom(变焦效果)
• special(特殊效果)
  这9类

具体使用animate.css很简单：

第二个class为需要的效果class

顺便还用到了下面的知识

• addEventListener() 方法用于向指定元素添加事件句柄。
• classList 属性返回元素的类名，该属性用于在元素中添加，移除及切换 CSS 类
• CSS 动画播放时，会发生以下三个事件：
  animationstart - CSS 动画开始后触发
  animationiteration - CSS 动画重复播放时触发
  animationend - CSS 动画完成后触发

//html代码


    
        
        
        
        
    
    
        

            

                
Attention(晃动)演示
                

                    bounce
                    flash
                    pulse
                    rubberBand
                    shake
                    swing
                    tada
                    wobble
                    jello
                    heartBeat
                
            
            

                

                    我是demo
                
            
        
        
    

//css代码
.content{
    width: 600px;
    height: 400px;
}
.left{
    height: 100%;
    width: 50%;
    float: left;
    background-color: #23B2DD;
}
.right{
    height: 100%;
    width: 50%;
    float: left;
    background-color: #34CE57;
    position: relative;
}
.btnall{
    text-align: center;
}
button{
    width: 40%;
}
.demo{
    position: relative;
    top: 40%;
    margin: auto;
    width: 30%;
    height: 50px;
    background-color: #9ACFEA;
}
@media(max-width: 600px){
    .left{
        height: 50%;
        width: 100%;
    }
    .right{
        height: 50%;
        width: 100%;
    }
    .content{
        width: 95%;
        height: 500px;
    }
}

欲知更多：具体可以在官方查找：https://daneden.github.io/animate.css/