官網：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>