[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); }