animatelo.js是一款基于Web Animations API的js动画库插件。通过animatelo.js动画库插件可以制作出63种炫酷的过渡动画效果，这些动画效果和animate.css相似。
安装
可以通过bower或npm来安装animatelo.js动画库插件。
$ bower install animatel --save $ npm install animatel --save
关于Web Animations API
Web Animations API是一种新的驱动网页元素动画的JavaScript API，它为浏览器和开发人员提供了一种用于描述DOM元素动画的通用方法。有了Web Animations API，我们可以不依赖于CSS3或js插件，就可以制作出炫酷的网页动画效果。
目前，Web Animations API只在Firefox 48+和Chrome 36+浏览器中有效。
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文件。
< script src="//cdn.rawgit.com/web-animations/web-animations-js/2.2.2/web-animations.min.js"> < script src="//cdn.rawgit.com/gibbok/animatelo/1.0.3/dist/animatelo.min.js">
HTML结构
以制作一个<h1>元素的动画效果为例：
< h1 id="hello">Hello world!
初始化插件
在页面DOM元素加载完毕之后，通过下面的方法来初始化animatelo.js插件。
window.animatelo.flip( '#hello' );
animatelo动画库支持的动画效果有：
bounceflashpulserubberBandshakeheadShakeswingtadawobblejelloheadShakebounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflipInXflipInYflipOutXflipOutYlightSpeedInlightSpeedOutrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRighthingerollInrollOutzoomInzoomInDownzoomInLeftzoomInRightjackInTheBox
标签：Web,插件,动画,js,API,animatelo From： https://www.cnblogs.com/skonw/p/18623638