Alt text

animate.css

Github地址: https://github.com/daneden/animate.css
体验地址：https://daneden.github.io/animate.css/

安装:

Bower:

$ bower install animate.css –save
npm:

$ npm install animate.css –save

使用：

基本用法

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

使用CDN

<head>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
  <!-- or -->
  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

使用带SRI hash的CDN，注意设置crossorigin为anonymous

<head>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"
  integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
  crossorigin="anonymous">
  <!-- or -->
  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
  integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
  crossorigin="anonymous">
</head>

用法：

给元素加上css类

$(‘#yourElement’).addClass(‘animated bounceOutLeft’);
去掉css类就可以去掉动画效果

$(‘#yourElement’).removeClass(‘animated bounceOutLeft’);
加上infinite就可以循环播放

$(‘#yourElement’).addClass(‘animated infinite bounceOutLeft’);

扩展：

如果你需要在动画完成之后，执行另一些操作，可以扩展jQuery，如下

$.fn.extend({
  animateCss: function(animationName, callback) {
    var animationEnd = (function(el) {
      var animations = {
        animation: 'animationend',
        OAnimation: 'oAnimationEnd',
        MozAnimation: 'mozAnimationEnd',
        WebkitAnimation: 'webkitAnimationEnd',
      };
      for (var t in animations) {
        if (el.style[t] !== undefined) {
          return animations[t];
        }
      }
    })(document.createElement('div'));

    this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);
      if (typeof callback === 'function') callback();
    });
    return this;
  },
});

使用：
(1)仅仅执行动画，不执行其它操作

$('#yourElement').animateCss('bounce');

(2)先执行动画，完成之后，执行其它操作

$('#yourElement').animateCss('bounce', function() {
 // Do somthing after animation
});

可以通过添加css样式来控制动画的时长，延迟时间和执行次数(indinite为无限多次)

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

自定义编译animate.css

进入animate.css目录，并安装所需的依赖

$ cd path/to/animate.css/
$ sudo npm install

如有需要，可以修改animate-config.json，来编译所需的动画效果对应css，默认是所有动画效果

"attention_seekers": {
    "bounce": true,
    "flash": false,
    "pulse": false,
    "shake": true,
    "headShake": true,
    "swing": true,
    "tada": true,
    "wobble": true,
    "jello":true
  }

运行gulp编译命令，生成自定义的css文件

小木木

动画插件animate.css使用说明

animate.css

安装:

使用：

用法：

扩展：