前端动画方案选择？基于DOM操作的 JS 动画 和 CSS3 动画对比

前端

JS动画 PK CSS3动画（上）

http://www.mrfront.com/2016/10/12/web-animate-1/

CSS3 好写好用，但也并不能解决所有需求，例如实现一个回顶的滚动动画 会涉及 scrollTop 属性，CSS 就无法控制了，还得由 JS 出马。PS：如果想实现一个链式动画，比如先变宽 再向右平移 接着翻转…… 用纯 CSS3 实现？一脸懵逼了吧，还是 jQuery.animate 来的方便。

CSS3 动画的优点也很明显：
1. 通过优化 DOM 操作，0GC 避免内存消耗来减少卡顿
2. 使用与 requestAnimationFrame 类似的机制
3. 可以强制使用硬件加速 （通过 GPU 来提高动画性能）

JS动画 PK CSS3动画（下）

http://www.mrfront.com/2016/10/13/web-animate-2/

万金油: velocity.js
http://www.mrfront.com/docs/velocity.js/index.html

JS 动画其实能人为控制到比 CSS3 动画 性能更加高效，很多大牛一直在这方面做努力，市面上涌现了很多高性能的优秀 JS 动画库，比如：transit.js、GSAP、bounce.js、velocity.js 等，其中 velocity.js 就是一个为高性能 Web 动画而生的轻量级、功能十分丰富的动画库，在 GitHub 上目前已有超过 1万的 star，可见受欢迎的程度有多高，https://github.com/julianshapiro/velocity。

velocity.js 完美结合了 jQuery、CSS3、requestAnimationFrame，但它可以独立于 jQuery 单独使用，语法和 jQuery.animate 相似，这样大大降低了学习成本，你可以抛开性能方面的顾虑而专注于动画本身，建立一个可控的动画工作流。

itsme 动画参考

https://codepen.io/theted/pen/cKAmi
https://codepen.io/rachsmith/pen/Fxuia