animate.css是一个以CSS3的animation制作的一个动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单，本文用来介绍该插件如何使用。
第一步：
下载animate.css文件，这个非常容易获得，就不多说了。
第二步：
在你的HTML页面中导入这个文件，例如：<link rel="stylesheet" href="./animate.min.css">
第三步：给你想要添加的动画效果的元素设置animate.css已经预定义好的css类
比如：<div class="animated bounceIn">animate.css动画演示</div>
此后，在浏览器中运行该页面，就能看到这个div做出了bounceIn的动画效果。
注意事项：
- animated类名，是animate.css插件的一个基础类，要做动画的元素，必须引用这个class名
- 如果想要做无限循环的动画，你可以给class里引用一个叫做“infinite”的类，元素就会自动的无限循环你要做的对应类型的动画
- 要做动画的元素必须是块级元素，否则无法看到动画效果。比如如果给span标签添加相应的类，将不会产生动画效果；假如你要做动画的元素必须是span标签，那么你需要通过display:block，把它设置为块级元素。
下面给出实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="animate.css"> <style> .box{ width: 600px; border: 1px solid #ccc; border-radius: 5px; margin: 100px auto; background-color: #eee; overflow: hidden; } .box ul{ width: 200px; float: left; background-color: #ddd; padding: 0; margin: 0; list-style: none; } .box ul li{ font-size: 16px; padding: 10px; text-align: center; border: 1px solid #999; cursor: pointer; } .box div{ width: 400px; /* height: 100%; */ background-color: #eee; border-radius: 5px; float: left; text-align: center; font-size: 16px; } .box div span{ display: block; background-color: pink; padding: 10px 20px; width: 200px; margin: 100px auto; } </style> </head> <body> <div class="box" id="box"> <ul> <li>flash</li> <li>pulse</li> <li>rubberBand</li> <li>shake</li> <li>headShake</li> <li>swing</li> <li>tada</li> <li>wobble</li> <li>jello</li> </ul> <div> <span class="animated">Hello,animate.css!</span> </div> </div> <!-- <span class="animated zoomIn infinite f">Hello,animate.css!</span> --> <script> var box = document.getElementById('box'); var lis = box.getElementsByTagName('li'); var span = box.getElementsByTagName('span')[0]; for(var i = 0; i < lis.length; i++){ lis[i].onclick = function(){ span.className = 'animated ' + this.innerHTML; console.log(span.className); for(var i = 0; i < lis.length; i++){ lis[i].style.backgroundColor = '#ddd'; lis[i].style.color = '#000'; } this.style.backgroundColor = '#444'; this.style.color = '#eee'; } } </script> </body> </html>