我们将向大家展示下网页动画的现状地图，并收集了一些具有多变表现力的类库、框架和插件。
图1：网络动画地图
下图分为三个区域，第一部分是一些容易理解的动画类库，撇开已经达到期望的通用动画方法外，还从简单的方法和函数到时间控制都提供了大家所希望的工具。我 们从JavaScript类库中分离了用CSS3过渡的动画元素，也挑选出了能够和SVG，WebGL或者HTML5 Canvas相连接的动画类库。
图2：工具列表
第二部分是专为文档模型中像滚动动画，视差，CSS sprite，3D变换，物理引擎和过渡这种动画元素提供不同的方法。
图3：表现技巧
最后一个重要的部分，也就是第三部分展示了一些能够帮助你根据项目要求来选择CSS或者Javascript为基础的动画的技巧。
我们相信你已经意识到CSS和以JavaScript为基础的动画备受争议，你会用自己的实际体验来选择。运行在你电脑上的每个项目最终的选择都决定于浏览器版本。好吧，从没人说过这很简单。
参考阅读：
我们能做的就是推荐一些有趣的文章和观点，当你需要做决定的时候提供一点点帮助。
[1] Myth Busting: CSS Animation vs. JavaScript,作者Jack Doyle给我们大致比较了一下以JavaScript为基础的动画和CSS动画组件。
[2] CSS Animations and Transitions Performance: Looking inside the Browser,作者Adobe网络团队。我们为你推荐这个文章是其完美的诠释了浏览器渲染的过程和问题。
[3] 第三篇，可能是最臭名昭著的一篇来自Paul Irish的Why Moving Elements with Translate() is better than Pos:abs Top/Left.
[4] Paul Irish另一篇是他与Paul Lewis 一起讨论的High Performance Animations.
[5] 不会被超越的，也是来自Paul Lewis的包含他对动画变现力深刻见解的Leaner, Meaner, Faster Animations with requestAnimationFrame.
特色工具：
工具太多了，现在的编辑器又不能加链接，所以请各位去原文地址点击链接。前文也复制了一些链接，如果失效，也请移驾原文，谢谢观看。
1.scrollReveal.js (http://h5bp.github.io/Effeckt.css/)
达成“滚动获取动效”的效果，这是JulianLloyd的开源项目
2.svg.js (http://www.svgjs.com/)
这是其中支持的一个效果
svg.js让设计师可以更得心应手的处理svg图像（包括动画效果）
3.three.js (http://threejs.org/)
Three.js是一款轻量化的JS库，能够用来创造3D动画，Three.js可以和Html 5 Canvas元素，SVG以及WebGL结合
4.Agile CSS3 引擎 (http://a-jie.github.io/Agile/#page-nav-top)
其中的一个demo演示
agile使用JS生成纯CSS3代码，无html canvas,无webGL，无SVG。在移动端Agile的表现力极佳！
5.Jaguarjs（Collie） (http://jindo.dev.naver.com/collie/index.html#about)
Collie是一款JS库，可以帮助设计师用HTML5构建效果极佳的动画和游戏。Collie使用了HTML5 和 DOM，能够很好地运行在移动端和桌面端，并且针对不同平台，提供最优渲染模式。
6.Effeckt.js (http://h5bp.github.io/Effeckt.css/)
精良的动效库，基于CSS的动效能够开启硬件加速
7.Skrollr （http://prinzhorn.github.io/skrollr/）
JS库，提供出众的视差滚动效果，仅有12k大，支持移动端和桌面端
8.Clickstream.js (http://git.blivesta.com/clickstream/)
丰富的页面转换效果
9.Parallax.js （https://github.com/wagerfield/parallax）
Parallax的引擎能够针对设备屏幕方向和尺寸做出相应。如果设备没有陀螺仪和运动传感器，那么用光标来代替。
10.Stellar.js （http://markdalgleish.com/projects/stellar.js/）
超级轻松即可实现视差滚动效果。
11.Physics.js 需翻墙 （http://wellcaffeinated.net/PhysicsJS/#demo-7）
模块化、易于扩展的JS物理引擎
12.animate.css (http://daneden.github.io/animate.css/)
简单、易用、强大，无需赘言
13.Matter.js （http://brm.io/matter-js/）
html5 javascript物理引擎，包括物理特性，冲撞特性，canvans渲染，webGL渲染
14.Box2dweb (https://code.google.com/p/box2dweb/)
又一个物理引擎
15.Morf.js （http://www.joelambert.co.uk/morf/）
支持CSS3硬件加速，可定制缓动函数
16.Snap.svg(http://snapsvg.io/)
轻松创建可交互矢量图形，方便适配多种设备。
17.Impress.js （https://github.com/bartaz/impress.js）
非常棒的演示框架，利用了CSS3 转换效果
18.Transit （http://ricostacruz.com/jquery.transit/）
超级流畅的CSS动效
19.Sly （http://darsa.in/sly/）
JS库，主要可用于轮播效果
20.Magic Animation （http://www.minimamente.com/example/magic_animations/）
CSS3特效动画
21.Superscrollorama (http://johnpolacek.github.io/superscrollorama/)
超级酷炫的滚动效果
来自：UI中国
文章评论