你我学习网
现代 Web 开发在将体验和功能做到极致的同时，对于美观的追求也越来越高，数据可视化、动画交互、2D/3D 等元素已然成为标配。
以下是为 Web 开发者推荐的一些精品开源图形库，旨在专注于最常见的问题和最常用的东西。将针对动画（Animation）、数据可视化（Data Visualization）、2D/3D 分别整理，欢迎保持关注。
动画
一、效果（Effects）
1、切换和过渡
Animate.css
一个跨浏览器的 css3 动画库，内置了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）、放大缩小（等多达 60 多种动画效果，几乎包含了所有常见的动画效果。在炫酷的同时，还一直保持着易于使用的特点。
效果预览：点此查看
Magic Animations
一个独特的 CSS3 动画特效包，可以自由地使用在 Web 项目中。包括：Magic Effects、Bling、Static Effects、Static Effects Out、Perspective、Rotate、Slide、Math、Tin、Bomb 等各类效果。
效果预览：点此查看
Effeckt.css
同样是一个包含众多精妙的 CSS3 切换和动画效果库，例如：弹窗、按钮、导航、列表、页面切换等，适用于网站和移动 Web 开发。
效果预览：点此查看
还有：
Velocity.js：一个简单易用、高性能、功能丰富的轻量级动画库。它能和 jQuery 完美协作，并和 $.animate() 有相同的 API， 但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能， 还有变换、循环、缩放等特色功能。
Anime.js：可以和 CSS3 属性、SVG、DOM 元素和 JS 对象一起工作，制作出各种高性能，平滑过渡的动画效果。
数量太多，不一一列举。
2、悬停
Hover
一款基于 CSS3 的悬停特效合集，可以轻松的被应用到链接、按钮、LOGO、SVG 以及图片等元素和修饰上。可用于 CSS、Sass 和 LESS 。
效果预览：点此查看
3、图标
Transformicons
一个结合 SVG、CSS 和 HTML 技术，让图标、按钮和符号具有变种（特殊）动画效果的库。它几乎可完成开发所需的任意动画效果，还提供了一些可选参数方便对效果进行自定义。
4、加载
Loaders.css
一款追求性能和体验感的加载动画合集，利用纯 CSS 实现多种样式的 Loading 加载动画。这些动画并不需要图片来辅助，以避免昂贵的绘画和布局成本，同时也对运行效率有所保证。
SpinKit
同样是一款 CSS 加载动画合集，可高度自定义动画效果，并且提供多个参数可供选择，运行性能流畅。
类似的 spin.js 也不错，压缩后仅 1.9K，在此不多赘述。
5、行为速度（Easing）
d3-ease
这是一个让动画更为平滑的 Easing 库。Easing 是一种通过调整时间映射来控制动画中的行为的方法。它最常用于缓慢进退，让动画转换更为平滑，行为更加合理。
6、滚动
ScrollReveal
一款页面滚动显示动画，可以播放一次也可以播放无限次，能让页面更加有趣，更吸引用户眼球。
ScrollMagic
一个用来创建魔幻滚动交互的 JavaScript 库，可以像使用进度条一样使用滚动条。支持在特定的滚动位置开始一个动画，并且让动画同步滚动条的动作，和把元素粘在一个特定的滚动位置。当用户到达某个滚动位置时，可以调用函数，或以任何其他方式来和当前的滚动位置进行交互。
7、视差
Parallax
一款简单，轻量级的视差效果生成器，可以对智能设备点击运动的方向作出反应，不需要任何识别方向，检测位置的设备，只需要游标（鼠标运动的方向等）的方向。
效果预览：点此查看
RELLAX
同样是一款主打轻量级的纯 JavaScript 视差效果库，但和 Parallax 的游标视觉差不同的是，它倾向于滚动视觉差。RELLAX 压缩后的版本仅 1021 个字节，在手机等小屏幕设备中,插件会自动限制视觉差特性。
8、翻转（Flip）
React FLIP Move
一个翻转移动的库，旨在解决当列表的顺序发生变化时，项目列表动画化的问题。DOM 节点实际上不能重新排序，创建新的节点，因此简单的 CSS 转换不起作用。react-flip-move 利用 FLIP 技术来计算出这样的转换将是什么样的，并使用硬件加速 CSS 转换。
效果预览：点此查看
从阿里的 Ant Design 中提炼出来的动效语言 Ant Motion ，也能实现类似的效果。它同时也是一套 React 框架动效解决方案，提供了单项、组合动画，以及整套解决方案。
9、数值
CountUp.js
一个无依赖关系的轻量级 JavaScript 类，可以用来快速创建以一种更有趣的动画方式显示数值数据。尽管它的名字叫 countUp，但其实可以在两个方向进行变化，取决于传递的 startVal 和 endVal 参数判断。
10、关键帧/时间轴
Dynamics.js
一款可以创建物理运动动画效果 JavaScript 库，只需把它引入页面，即可激活任意 DOM 元素的 CSS 属性动画，也可结合 SVG 使用。
React-Motion
一个值得推荐的物理动画库， 使动画看起来像一个弹簧那样，配置合适的劲度系数和空气阻力后，可以使网站增添一些俏皮的元素，让用户体验起来更加舒畅。
11、轨迹/曲线
Mojs
一个拥有极简的声明式 API ，能够轻松掌控运动轨迹，为运动图形而生的工具库，允许模块化需求定制，有良好的动画效果和用户体验。
Vivus
一个无依赖的轻量级 Javascript 库，可以绘制 SVG 图形的外观，执行 SVG 路径动画。它有各种不同的动画效果可用，允许创建一个自定义脚本来绘制 SVG 。
本文是转载开源中国，如果侵权，请联系作者及时删除，原文地址：https://my.oschina.net/editorial-story/blog/135929...
