如何使用动画库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里面所定义的就好了。
