animate.css的使用方法

animate.css介绍

animate.css是一个跨浏览器的css3动画库

animate.css基础使用

引入animate.css文件
给指定的元素添加基础class animated
给指定的元素添加动画class
如果需要无限做动画, 添加 infinite 类名即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/animate.css">
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px;
        }
    </style>
</head>
<body>

<div class="animated swing"></div>

</body>
</html>

animate.css和jQuery结合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin: 100px auto;
        }
    </style>
    <script src="./js/jquery.js"></script>
    <link rel="stylesheet" href="./css/animate.css">
    <script>
        $(document).ready(function () {
            console.log('test');
            $('#test').addClass('animated infinite rollIn');
        })
    </script>
</head>
<body>
<div id="test"></div>
</body>
</html>

animate.css动画属性设置

编写动画属性, 覆盖animate.css库中的默认属性
编写的时候注意选择器的权重

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      *{
          padding: 0;
          margin: 0;
      }
      div{
          width: 100px;
          height: 100px;
          background-color: gold;
          margin: 200px auto;
      }

      #test{
          /*设置动画属性*/
          animation-duration: 5s;
          animation-delay: 1s;
          animation-iteration-count: 2;
      }
  </style>
  <script src="./js/jquery.js"></script>
  <link rel="stylesheet" href="./css/animate.css">
  <script>
      $(document).ready(function () {
          var $test = $('#test');
          $test.addClass('animated swing');
      })
  </script>
</head>
<body>
<div id="test"></div>
</body>
</html>

animate.css动画结束后回调

使用jQuery的one监听动画结束, 然后添加回调函数
动画结束事件 webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      *{
          padding: 0;
          margin: 0;
      }
      div{
          width: 100px;
          height: 100px;
          background-color: skyblue;
          margin: 200px auto;
      }

      #test{
          /*设置动画属性*/
          animation-duration: 3s;
          animation-delay: 5s;
          animation-iteration-count: 2;
      }
  </style>
  <script src="./js/jquery.js"></script>
  <link rel="stylesheet" href="./css/animate.css">
  <script>
      $(document).ready(function () {
          var $test = $('#test');
          $test.addClass('animated hinge');
          $test.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
              console.log('hello world'); // 两次动画完毕后才打印
              console.log(this); // dom元素
              $test.removeClass('hinge');
              $test.addClass('animated rotateIn');
          })
      })
  </script>
</head>
<body>
<div id="test"></div>
</body>
</html>

animate.css的使用方法

animate.css介绍

animate.css基础使用

animate.css和jQuery结合使用

animate.css动画属性设置

推荐阅读更多精彩内容