如何使用动画库animate.css

animate.css是一个CSS3动画库，里面预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果。你可以点击打开它的官网查看演示，里面几乎包含了所有常见的动画效果。妈妈在也不用担心我不会写动画了！！！

演示地址动画演示地址。

下载地址链接点击下载地址链接下载，打开的是一个css文件直接Ctrl+A全选 Ctrl+C复制即可。

如何使用：

先来看一个简单的示例：

<!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>
    <!-- 引入 animate.css -->
    <link rel="stylesheet" href="./css/animate.css">
    <style>
        .box {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 打开浏览器就可以看到其效果了 -->
    <div class="box animated bounce">盒子</div>
</body>
</html>

首先页面引入 animate.css。把 animated 添加到类属性上， animated 是动画的一个基类每个动画都必须添加紧接着后面就是动画名。

例如：

<div class="box animated jello">盒子</div>

原生js添加动画示例：

<!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>
    <!-- 引入 animate.css -->
    <link rel="stylesheet" href="./css/animate.css">
    <style>
        .box {
            position: relative;
            left: 78px;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
        }
        button { display: block; margin: auto;}
    </style>
</head>
<body>
    <div class="box" id="box">盒子</div>
    <button id="btn">点我</button>
    <script>
        // 获取盒子和按钮
        var box = document.getElementById('box');
        var btn = document.getElementById('btn');
        // 给 按钮 绑定一个单击事件只要触发了就执行这个匿名函数
            btn.onclick = function() {
                // 给盒子添加动画 基类 和类名
                box.classList.add('animated','bounce');
        }
    </script>
</body>
</html>

jQuery添加动画类示例：

<!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>
    <!-- 引入 animate.css -->
    <link rel="stylesheet" href="./css/animate.css">
    <!-- 引入 jquery.js -->
    <script src="./js//jquery3.4.1min.js"></script>
    <style>
        .box {
            position: relative;
            left: 78px;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
        }
        button { display: block; margin: auto;}
    </style>
</head>
<body>
    <div class="box" id="box">盒子</div>
    <script>
       $(function() {
         var $this = $('#box');
            $this.hover(function() {
               $this.addClass('box animated bounce'); 
           },function() {
               $this.removeClass('animated bounce');
           })
       })
    </script>
</body>
</html>

至于动画其他的配置参数，如动画持续时间,动画的执行次数等等，你可以在你的的元素上自行定义，覆盖掉animate.css里面所定义的就好了。