web 动画库
web动画库
动画领域有一个比较知名的CSS库：Animate.css，它提供了60多种动画，满足一般网页的需求，比如淡入淡出、闪现等等一系列日常动画，不过虽然它能满足日常需求，但是一些复杂的场景就需要靠JS手动去操作，比如界面滚动到某个元素才开始播放动画，比如拖拽、比如滚动界面时，动态调整元素就需要使用到GreenSock
1.animate.css
Animate.css | A cross-browser library of CSS animations.
animate.css 是一个来自国外的 C553 动画库，它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotate0ut)、淡入淡出(fadeIn/fade0ut)等多达 68多种动画效果，几乎包含了所有常见的动画效果。
顾名思义是与class相关联的
2 GreenSock最健全的web动画库之一
https://greensock.com/
GreenSock动画平台（GSAP）可以对JavaScript可以操作的所有内容进行动画处理（CSS属性，SVG，React，画布，通用对象等），同时解决了不同浏览器上存在的兼容性问题，而且速度极快（比jQuery 快20倍）。大约有1000万个站点和许多主要品牌都使用 GSAP。
动画其实是每秒多次改变元素属性值，元素看起来就仿佛在动一样，比如淡入淡出，旋转，移动等。而GSAP捕捉一个起始值和一个结束值，然后每秒在它们之间插值60次。
如果从技术上面来讲，GSAP其实应该被称为“GreenSock属性操纵器”（GSPM）。
ScrollTrigger.min.js滚动插件 可按需引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/CSSRulePlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/Draggable.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/EaselPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/MotionPathPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/PixiPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/TextPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/ScrollToPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/ScrollTrigger.min.js"></script>