官网：https://daneden.github.io/animate.css/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> <style> #boxOne { width: 100px; height: 100px; background: paleturquoise; margin: 100px auto; } #box { width: 100px; height: 100px; background: paleturquoise; margin: 100px auto; } .container{ text-align: center; } </style> </head> <body> <div id="boxOne" class="animated bounce">页面加载就触发动画</div> <hr/> <div id="box">单击事件动画</div> <div class="container"><button id="btn">点击触发动画</button></div> <script> 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); } /*点击按钮后触发animateCss函数*/ btn.onclick = function() { animateCss('#box', 'rubberBand') }; </script> </body> </html>