当前位置:首页 > 开发代码

网页动画animate.css使用教程

小强的家   发布时间:2019-04-21   

animate.css的使用非常简单,因为它是把不同的动画绑定到了不同的类里,所以想要使用哪种动画,只需要把通用类animated和相应的类添加到元素上就行了

  下面来详细介绍animate.css里面的类,主要包括Attention(晃动效果)、bounce(弹性缓冲效果)、fade(透明度变化效果)、flip(翻转效果)、rotate(旋转效果)、slide(滑动效果)、zoom(变焦效果)、special(特殊效果)这8类。

animate.css动画库的浏览器兼容性 

只兼容支持 CSS3 animate 属性的浏览器,他们分别是:IE10+、Firefox、Chrome、Opera、Safari。


使用方法

 
1、引入文件 

<link rel="stylesheet" href="animate.min.css">
 
2、HTML 及使用

<div class="animated bounce" id="hepai"></div>
 
给元素加上 class 后,刷新页面,就能看到动画效果了。animated 类似于全局变量,它定义了动画的持续时间;bounce 是动画具体的动画效果的名称,你可以选择任意的效果。

如果你要使用永续动画,可以在class中加上infinite;如:

<div class="animated bounce infinite" id="hepai"></div>
 
你也可以通过 JavaScript 或 jQuery 给元素添加这些 class,比如:

$(function(){
    $('#hepai').addClass('animated bounce');
});
 
有些动画效果最后会让元素不可见,比如淡出、向左滑动等等,可能你又需要将 class 删除,比如:

$(function(){
    $('#hepai').addClass('animated bounce');
    setTimeout(function(){
        $('#dowebok').removeClass('bounce');
    }, 1000);
});
 
animate.css 的默认设置也许有些时候并不是我们想要的,所以你可以重新设置,比如:

#hepai {
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count: 2;
}
 
完整实例:

<!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 () {
        $('#hepai').addClass('animated bounce');
      })
  </script>
</head>
<body>
<div class="animated bounce infinite" id="hepai"></div>
</body>
</html>



相关文章:

网页动画animate.css使用教程评论(共有 0 条评论)

我要点评网页动画animate.css使用教程
用户名: 密码: (游客无需填写密码)

验证码: 看不清楚,点击刷新 (如果提示验证码过期,请点击验证码刷新。)
【提交后需要审核】