软件简介
AOS（Animate on scroll）是小型动画滚动库，可在页面滚动时给元素添加动画效果。CSS3 驱动，效果类似于 WOWJS。
构建
安装 AOS
使用 bower
bower install aos --save
使用 npm
npm install aos --save
去Github仓库下载 https://github.com/michalsnik/aos
Link styles
<link rel="stylesheet" href="bower_components/aos/dist/aos.css" />
Add scripts
<script src="bower_components/aos/dist/aos.js"></script>
AOS 从 1.2.0 版本可用作 UMD 模块，因此您可以将其用作 AMD，Global，Node 或 ES6 模块。
Init AOS
<script>
AOS.init();
</script>
例子：
1、 body[data-aos-duration='4000'] [data-aos],
[data-aos][data-aos][data-aos-duration='4000'] {
transition-duration: 4000ms;
}
2、 <div data-aos="fade-in" data-aos-duration="4000"></div>
动画效果Animations
-
Fade animations:
- fade
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left
-
Flip animations:
- flip-up
- flip-down
- flip-left
- flip-right
-
Slide animations:
- slide-up
- slide-down
- slide-left
- slide-right
-
Zoom animations:
- 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
Anchor placements:
- top-bottom
- top-center
- top-top
- center-bottom
- center-center
- center-top
- bottom-bottom
- bottom-center
- bottom-top
Easing functions:
- 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