前端动画开源库animate.css

Animate.css

1.简介：一个跨浏览器的 css3 动画库，内置了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）、放大缩小（等多达 60 多种动画效果，几乎包含了所有常见的动画效果。在炫酷的同时，还一直保持着易于使用的特点。

2. 官网：效果预览

3.0 Installation（安装）：

通过bower安装：$ bower install animate.css --save

通过npm安装：$ npm install animate.css --save

3.1 基本用法：

在文档的标题中包含样式表，通过link标签引入（下载方式可以通过下面cdn访问复制源码）

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

3.2 cdn链接：

https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css

3.3 您可以生成该特定版本的SRI哈希，然后使用它来确保文件的完整性;您还可以通过设置相应的交叉路口属性向CDN发出匿名请求：

<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>

3.4 将class动画添加到您想要动画的元素中。您可能还想要包括一个很多class用来以后使用

3.4.2 最后，您需要添加以下类：

Class Name
`bounce`	`flash`	`pulse`	`rubberBand`
`shake`	`headShake`	`swing`	`tada`
`wobble`	`jello`	`bounceIn`	`bounceInDown`
`bounceInLeft`	`bounceInRight`	`bounceInUp`	`bounceOut`
`bounceOutDown`	`bounceOutLeft`	`bounceOutRight`	`bounceOutUp`
`fadeIn`	`fadeInDown`	`fadeInDownBig`	`fadeInLeft`
`fadeInLeftBig`	`fadeInRight`	`fadeInRightBig`	`fadeInUp`
`fadeInUpBig`	`fadeOut`	`fadeOutDown`	`fadeOutDownBig`
`fadeOutLeft`	`fadeOutLeftBig`	`fadeOutRight`	`fadeOutRightBig`
`fadeOutUp`	`fadeOutUpBig`	`flipInX`	`flipInY`
`flipOutX`	`flipOutY`	`lightSpeedIn`	`lightSpeedOut`
`rotateIn`	`rotateInDownLeft`	`rotateInDownRight`	`rotateInUpLeft`
`rotateInUpRight`	`rotateOut`	`rotateOutDownLeft`	`rotateOutDownRight`
`rotateOutUpLeft`	`rotateOutUpRight`	`hinge`	`jackInTheBox`
`rollIn`	`rollOut`	`zoomIn`	`zoomInDown`
`zoomInLeft`	`zoomInRight`	`zoomInUp`	`zoomOut`
`zoomOutDown`	`zoomOutLeft`	`zoomOutRight`	`zoomOutUp`
`slideInDown`	`slideInLeft`	`slideInRight`	`slideInUp`
`slideOutDown`	`slideOutLeft`	`slideOutRight`	`slideOutUp`

example:

<h1 class="animated infinite bounce">Example</h1>

4. 你可以用动画来做很多其他的事情。当您将它与jQuery结合或添加您自己的CSS规则时。使用jQuery动态地添加动画：

$('#yourElement').addClass('animated bounceOutLeft');

你还可以检测到动画的结束：

// See https://github.com/daneden/animate.css/issues/644
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'));

$('#yourElement').one(animationEnd, doSomething);

animate.css和jQuery结合教程：点击打开链接（需要翻墙）

5. 您还可以扩展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;
  },
});

像这样使用它：

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

你可以改变你的动画的持续时间，添加一个延迟或者改变它播放的次数：

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

注意：其中vendor代表(webkit, moz)其中的一个