欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

animate.css用法介绍

程序员文章站 2024-03-25 18:47:52
...

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>

 

上一篇： opencv+python图像匹配——模版匹配、特征点匹配

下一篇： Java中的return语句使用总结

推荐阅读