animatelo.js是一款基于Web Animations API的js动画库插件。通过animatelo.js动画库插件可以制作出63种炫酷的过渡动画效果，这些动画效果和animate.css相似。

安装

可以通过bower或npm来安装animatelo.js动画库插件。

$ bower install animatelo --save
$ npm install animatelo --save

关于Web Animations API

Web Animations API是一种新的驱动网页元素动画的JavaScript API，它为浏览器和开发人员提供了一种用于描述DOM元素动画的通用方法。有了Web Animations API，我们可以不依赖于CSS3或js插件，就可以制作出炫酷的网页动画效果。

目前，Web Animations API只在Firefox 48+和Chrome 36+浏览器中有效。对于其它浏览器，可以通过一个补丁文件来实现Web Animations API。

animatelo.js和web-animations.min.js补丁文件的浏览器兼容性如下：

  • Chrome
  • Firefox 27+
  • IE10+ (包括Edge)
  • Safari (iOS) 7.1+
  • Safari (Mac) 9+

使用方法

在页面中引入web-animations.min.js和animatelo.min.js文件。

<!-- Include the polyfill -->
<script src="//cdn.rawgit.com/web-animations/web-animations-js/2.2.2/web-animations.min.js"></script>

<!-- Include Animatelo -->
<script src="//cdn.rawgit.com/gibbok/animatelo/1.0.3/dist/animatelo.min.js"></script>
HTML结构

以制作一个<h1>元素的动画效果为例：

<h1 id="hello">Hello world!</h1>
初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化animatelo.js插件。

window.animatelo.flip('#hello');

animatelo动画库支持的动画效果有：

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • headShake
  • 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
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • jackInTheBox

animatelo.js动画库插件的github地址为：https://github.com/gibbok/animatelo