使用Animate.css
Animate.css是一个css动画库，可以做出一些非常好看的动画；
Animate.css非常容易上手，但是动画是一开始就加载出来，不能控制；
如何通过js事件，比如点击事件控制呢？
代码：
<html> <head> <meta charset="utf-8"> <title>Animate 实例</title> <!-- 引入 --> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"> </head> <style type="text/css"> /* CSS代码 */ #box { width: 100px; height: 100px; background: paleturquoise; margin: 100px auto; } </style> <script type="text/javascript"> /* JS代码 *//* 定义animateCss函数（传过来的元素，动画名，回调函数） */ function animateCss(element, animationName, callback) { /* 获取传过来的 */ const node = document.querySelector(element); /* 给元素加上基础类animated，还有动画类 */ node.classList.add('animated', animationName); function handleAnimationEnd() { /* 移除基础类和动画类 */ node.classList.remove('animated', animationName); /* 解除当前元素的事件监听 */ node.removeEventListener('animationend', handleAnimationEnd); /* 如果有回调函数，就执行回调函数 */ if (typeof callback === 'function') callback(); } /* 通过事件监听，当动画结束后，执行handleAnimationEnd函数 */ node.addEventListener('animationend', handleAnimationEnd); } </script> </head> <body> <!-- HTML代码,设置了一个div和一个按钮 --> <div id="box" ></div> <center> <!-- box是标签的id，bounce是元素的动画效果，可从官网找 --> <button id="btn" onclick="animateCss('#box','bounce')">btn</button> </center> </body> </html>
效果，只要点击btn按钮，就会跳动：
注意：这是3.7.0的版本，目前的Animate.css已经更新到了4.1，如果引入最新的，需要修改js的函数
