Animation of Scroll 基于CSS3 animation，不支持低版本浏览器；
和基于Animation.css的收费库WOW.JS相似，但有自己的特色；
或者可百度一下AOS.JS去下载需要的资源库
手动添加需要引入
<link rel='stylesheet' href='aos.css'> <script src='aos.js'></script> <script> AOS.init(); </script>
如果你不想单独每个元素做一个动画配置，你可以通过init()方法来统一配置所有元素的动画效果。
AOS.init({
offset:-120,//px，提前或延迟触发，负数提前触发
duration:400,//ms，过渡时间，50-3000
easing:ease,//时间曲线
delay:0,//s，延迟执行
anchor:null，//body，指定元素触发，Element
anchor-placement:top-bottom,//top向bottom滚动，top和bottom触发，top|center|bottom任意二个组合，分先后方向，可重复如center-center
once:false//是否仅触发一次
})注意，aos-duration的动画持续时间的范围从50-3000毫秒，如果你想设置更大的值，可以在页面中添加下面的CSS代码：
body[data-aos-duration='5000'] [data-aos], [data-aos][data-aos][data-aos-duration='5000']{
transition-duration: 5000ms;
}注意：两[data-aos]的写法，提高优先级，不必!important；
要使用aos动画库，你需要做的就是在需要动画的元素上添加aos属性，例如：
<div data-aos="animation_name">
注意：默认配置项，前加data-aos-，作用到元素
如果需要指定某个效果
<div aos="fade-zoom-in" aos-offset="200" aos-easing="ease-in-sine" aos-duration="600"> <div aos="flip-left" aos-delay="100" aos-anchor=".example-selector"> <div aos="fade-up" aos-anchor-placement="top-center">
如果你担心HTML5校验的问题，可以为上面的属性添加data-前缀。
<div data-aos="animation_name" data-aos-offset="200" data-aos-easing="ease-in-sine">
aos脚本将会在页面滚动时，在该元素上触发相应的动画。
在元素上还可以添加以下一些属性：
属性 属性 属性 默认值
aos-offset 是立刻触发动画还是在指定时间之后触发动画 200 120
aos-duration 动画持续时间 600 400
aos-easing 动画的easing动画效果 ease-in-sine ease
aos-delay 动画的延迟时间 300 0
aos-anchor 锚元素。使用它的偏移来取代实际元素的偏移来触发动画 #selector null
aos-anchor-placement 锚位置，触发动画时元素位于屏幕的位置 top-center top-bottom
aos-once 动画是否只会触发一次，或者每次上下滚动都会触发 true false
禁用写法
AOS.init({
disable:false,//禁用，false|mobile|phone|tablet
//或者，自定义规则
disable:window.innerWidth > 400
//或者，传入函数，return false|true
disable:function(){
returen window.innerWidth > 400
}
})如果你不想滚动动画从页面加载（DOMContentLoaded）后就开始执行，可以使用startEvent来设置自己的事件，AOS会在document上监听这个事件：
AOS.init({
startEvent: 'someCoolEvent'
});动画列表：data-aos:
1.fade类（淡入淡出动画）：fade、fade-up、fade-down、fade-left、fade-right、fade-up-left、fade-up-right、fade-down-left、fade-down-right
2.flip类（翻转动画）：flip-up、flip-down、flip-left、flip-right
3.slide类（滑动动画）：slide-up、slide-down、slide-left、slide-right
4.zoom类（缩放动画）：zoom-in、zoom-in-up、zoom-in-down、zoom-in-left、zoom-in-right、zoom-out、zoom-out-up、zoom-out-down、zoom-out-left、zoom-out-right
你可以使用以下的一些easing动画效果
时间曲线：data-aos-easing:
linear、ease、
ease-in、ease-out、ease-in-out、
ease-in-back、ease-out-back、ease-in-out-back、
ease-in-sine、ease-out-sine、ease-in-out-sine、
ease-in-quad、ease-out-quad、ease-in-out-quad、
ease-in-cubic、ease-out-cubic、ease-in-out-cubic、
ease-in-quart、ease-out-quart、ease-in-out-quart
