[TOC] # Animate.css 官網(特效參考)： [https://daneden.github.io/animate.css/](https://daneden.github.io/animate.css/) 源碼下載地址：[https://github.com/daneden/animate.css](https://github.com/daneden/animate.css) ## 1兼容性 animate.css底層是通過css3實現的，當然是只兼容支持 CSS3 animate 屬性的瀏覽器： **IE10+、Firefox、Chrome、Opera、Safari。** ## 2.步驟 使用步驟： 1 引入下載好的animate.css文件 2 給要做動畫的元素添加類名 要添加兩個類名，分別是： animated(控制時間) 要添加的動畫效果類名（控制效果） ## 3.舉例 ``` ~~~ <style type="text/css"> *{margin: 0;padding: 0;border: 0;list-style: none;} body{ background: url('images/bg.jpg'); } .loginBox{ width: 500px; height: 300px; border: 1px solid #f00; border-radius: 5px; background: rgba(255,255,255,0.7); margin: 200px auto; } h2{ padding-top: 40px; text-align: center; color: #f00; font-size: 16px; } .line{ width: 250px; height: 30px; margin-bottom: 20px; line-height: 30px; margin: 30px auto; } .line span{ float: left; text-align: right; width: 70px; } .line input{ float: right; border: 1px solid #f00; box-sizing: border-box; height: 30px; border-radius: 5px; text-indent: 1em; } .login{ width: 80px; height: 30px; line-height: 30px; border: 1px solid #f00; border-radius: 5px; text-align: center; color: #f00; margin: auto; cursor: pointer; } </style> <link rel="stylesheet" href="animate/animate.min.css"> <script src="js/jquery.min.js"></script> <div class="loginBox"> <h2>用戶登錄</h2> <div class="line"> <span>賬號：</span> <input type="text" name="" placeholder="請輸入賬號"> </div> <div class="line"> <span>密碼：</span> <input type="password" name="" placeholder="請輸入密碼"> </div> <div class="login">登錄</div> </div> <script> $(".login").click(function () { //不能使用delay()，用于將隊列中的函數延時執行。他既可以推遲動畫隊列的執行，也可以用于自定義隊列 //方式一 $(".loginBox").addClass("animated bounce"); setTimeout(function () { $(".loginBox").removeClass("animated bounce"); },1000); // 方式二 $(".loginBox").addClass(function () { setTimeout(function () { $(".loginBox").removeClass("animated bounce");/*在1s后刪除添加的類*/ },1000); return "animated bounce";/*返回值是要添加的類 動畫時間是1s*/ }) // 方式三 $(".imgBox").addClass("animated bounce").on("animationend",function () { $(this).removeClass("animated bounce"); }) }) </script> ~~~ ``` ### 4.當動畫結束的時候 ``` $(".loginBox").addClass("animated bounce").on("animationend",function(){ $(this).removeClass("animated bounce") }) ``` ***** 原生js寫法： document.getElementsByClassName('login')[0].onclick = function(){ animateCss('.loginBox', 'bounce'); } function animateCss(element, animationName, callback){ // 添加和刪除動畫的 // 1、獲取要增加動畫的某個節點 var node = document.querySelector(element); // 2、添加類名 node.classList.add('animated', animationName); function fn(){ // 4、動畫結束要執行的事件 // 5、刪除類名 node.classList.remove('animated', animationName); // 6、刪除監聽 node.removeEventListener('animationend', fn); // 7、判斷是否存在回調，如果是，執行，否則，不管他 if(typeof callback === 'function'){ callback(); } } // 3、檢測動畫結束時要執行的事件 node.addEventListener('animationend', fn); }