# 动效库收藏
# 可能是全网最全动效合集
- Animate.css_github、官网
一个跨浏览器的动效基础库，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效，一应俱全 - Bounce.js、官网
可以直接在浏览器中进行设计和设置的动画库，带有一个完整的网页构建器，只需添加一个组件，选择预设，然后你就可以得到CSS 代码了 - Anime.js、官网
将动画加持在LOGO、按钮、图像等各种各样的元素上。它支持各种常见的触发机制，比如点击、悬停、滑动，你可以借助它定义一系列的动画。 - Magic Animations、官网
与Animate.css十分类似，也是一个预定义了一系列动效的CSS库。但与Animate.css的最大区别可能是，它定义的那些动效更炫也更酷一些 - AniJS、官网
号称“无需编码即可提升网页设计的图书馆”，通过 if、on、do、to 等简单的命令更加直观地处理动效还能用来控制前面 Animate.css 来创造动效。 - CSShake、官网
元素颤抖效果。一个疯狂摇动的动效库，包括方向（水平、上下），类型（固定、疯狂），强度（强、弱）等等 - Velocity.js、github
一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，且不依赖 jQuery。 - Vivus.js、官网
一个轻量级的JavaScript动效库，跟Lazy Line Painter一样，它也是创建SVG路径动画的，里面有各种不同的动画可供选择，以及创建自定义脚本的选项，可以以你喜欢的任何方式绘制SVG。动画类型有延迟、同步和依次绘制三种，还有定时功能 - Hover.css、官网
鼠标悬浮效果。提供了大量的Hover效果，包括2D变换，图标变换，背景变换等等。而且几乎可以应用于所有元素，包括链接，按钮，logo，SVG甚至图片等等。 - Snabbt.js、官网
只有5k，所以可以被用在移动应用中。而且它也支持链式语法，你可以很方便地写出复杂的动效组合。 - Dynamics.js
一个JS库，能为你提供9种标准的动效，你可以制定其中的持续时间、频率、预期尺寸和强度等数据，创造出符合物理效果的动效 - Lazy Line Painter、github
一个用于SVG路径动画的JQUERY插件，可以使用它轻松创建SVG路径动效。在AI中输出SVG文档，上传到转换器中，它就能帮你将它处理成为动效，生成jQuery 文档。你还可以编辑代码进行微调 - It's Tuesday.、github
借助这个库，你可以有效的控制页面中元素的出现和消失的方式。
动画并不是那种炫酷屌炸天的，相反它们是非常微妙的，真正从美学和用户体验的层面提升整个页面的设计。 - CSS Animate
能让你设置更多的动效参数，比如你可以同时设置动效起始和终止状态的坐标，大小，以及透明度，能做出更复杂的动效 - CSS3 Animation
一个非常简单易用的动效工具，你可以在它提供的简单图形界面里，通过拖拽一些进度条来控制你的动效，生成的CSS代码会自动显示在下面的一个文本框里，你可以拷贝粘贴到你的应用中直接使用 - AOS、github
更多地依赖于CSS，包含了一系列有滚动事件触发的漂亮的预定义动效。
开发人员可以在向下滚动时为页面元素添加动画，然后在向上滚动时恢复之前的动画状态。这个库还附带了许多可由滚动事件触发的预定义事件。 - Particles JS
- Single Element CSS Spinners、github
一组非常漂亮的可用于加载中状态的CSS3动效 - Odometer、github
用来给数字作动效的，比如通过它你可以很好地呈现网站人数的增加，倒计时等与数字相关的动画效果。 - Wicked CSS、github
主要是基于CSS代码的，让对象进行旋转、翻转、划入等不同类型的动画效果。 - Animate Plus
一个轻量级的动效库，它只有2KB，但是它有着自定义 JavaScript 动画所需的全部基本功能。 - matter.js
吊炸天了，接近现实生活中的物理运动、碰撞、惯性动画库。 - parallax.js、github
这个效果也很常见，类似于视觉差效果。 - animatable
一个属性，两个值，创造无限可能 - DynCSS
用动态CSS来打造你的网页 - Favico.js、github
可以使用视频、标志或图片来设计站点的Favicon - SVG.js
为你提供一个更加直观的编辑SVG动效的环境。它足够小巧，语法也简单，并且提供统一的API。 - Motion UI
借助SASS 来创建有趣的CSS动效。其中包含了一整套预定义的特效，可以运用到不同的HTML组件当中去。除了IE9，其他浏览器都可用。 - choreographer.js
通过自定义参数实现对复杂动效的设计。 - sequence.js（最后维护时间4年前）
是一个CSS驱动下的动效框架，用来构建基于步骤的响应式的动效。 - voxel.css
专门用来3D 渲染的工具，即使你是新手也能够轻松掌握3D CSS样式。 - repaintless.css
使用FLIP 技术让动画更加平滑 - mixitup
一个非常实用的库，用来创造漂亮的顾虑、排序、插入等界面的动态效果 - ramjet
制作从一个元素变化为另外一个元素的动效，它能作用于DOM元素、SVG、静态和动态的图片。 - jquery drawsvg
基于jQuery 引擎，能够有效地绘制出SVG内的所有路径，制作出戏剧性的动效。 - Snap.svg
适用于现代网络的JavaScript SVG库。 - http://animatemate.com/
# 2019年里这11个好用的JavaScript动画库给你
- Three.js
这个流行的库提供了非常多的3D显示功能，以一种直观的方式使用 WebGL。这个库提供了<canvas>、 <svg>、CSS3D 和 WebGL渲染器，让咱们在设备和浏览器之间创建丰富的交互体验 - Anime.js
- Mo.js
是一个用于 Web 的动态图形工具带，具有简单的声明 API，跨设备兼容性和超过1500个单元测试。咱们可以在 DOME 或SVG DOME周围移动东西或创建唯一的 mo.js 对象 - Velocity
Velocity是一个快速的 JS 动画引擎，拥有与jQuery的 $.animate() 相同的API。它具有彩色动画、转换、循环、画架、SVG支持和滚动。这里是Velocity的高性能引擎的分解 - Popmotion
这个动画库大小只有 11 kb。它允许开发人员从动作创建动画和交互，这些动作是可以启动和停止，可以使用 CSS、SVG、React、three 创建，js 和任何接受数字作为输入的 API。 - Vivus
- GreenSock JS
用于创建高性能、零依赖、跨浏览器动画，据称在超过400万个网站上使用。GSAP是灵活的，可以与 React、Vue、Angular 和 vanilla JS 协同工作。GSDevtools 还可以帮助使用 GSAP 构建dubug 动画 - Scroll Reveal
这个库为 web 和移动浏览器提供了简单的滚动动画，以动画的方式显示滚动中的内容。它支持多种简洁的效果类型，甚至允许你使用自然语言定义动画。这里有一个简短的 SitePoint教程 - Hover (CSS)
- Kute.js
一个完全成熟的原生 JS 动画引擎，具有跨浏览器动画的基本功能。重点是代码质量，灵活性，性能和大小（核心引擎17k 和 gzipped 5.5k） - 这是一个演示。该库也是可扩展的，因此你可以添加自己的功能。 - Typed.js
这个库基允许你以选定的速度为字符串创建打字动画。你还可以在页面上放置 HTML div 并从中读取以允许搜索引擎和禁用 JS 的用户访问，由Slack和其他人使用，这个库既流行又非常有用