一款非常好用的css动画库--animate.css

今天再学习vue.js的时候看到了一个不错的css库，vue官方推荐（不一定要使用vue.js才能使用这个css库），这个库叫做animate.css，是个动画效果的css库，有好多不错的动画效果。

首先看怎么引用，

官网下载：https://raw.githubusercontent.com/daneden/animate.css/master/animate.css

效果试用：https://daneden.github.io/animate.css

在线引用：http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css

 

然后是在实际项目中的使用：

    
        
    
    
    
    
    
animate
        add
        remove
        
      

可以看到我先是在页面上构建了一个100*100的红色方块，赋予一个animated的类（必需），或者也可以在js中添加这个类，然后定义了两个按钮，分别给方块添加bounceInLeft类和bounceOutLeft类，以及删除相反的类（不删除没有效果），接着就可以在页面上看到效果啦，按add按钮会让方块从左边滑入，按remove按钮会让方块从左边滑出。

当然这只是animate库中的一个动画效果，还有其他好多有趣的效果。下面展示效果种类一部分的截图（具体所有效果可进入上方效果试用链接进行使用）：

                                                

在上方代码中，js部分还可以加上

box.classList.add('infinite');

这样子就会循坏动画效果了。