基于Web Animations API的js动画库插件

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