Animation

没有找满意的 QA，我之前写过一个资源列表，如果能全部熟悉，Web Animation 就会显得 Naive

Web Animation 的十几年

在 2000 年，《How Web Animation Works》在谈 Gifs、 Flash、DHTML

在 2001 年，《SMIL Animation》在谈 SVG 等标记语言

在 2009 年，CSS3 在谈动画类模块，HTML5第一版已发布一年

在 2015 年，可以大胆的使用各种动画实现技术

从The Evolution of the Web 可以看出 2008 年开始 Web 发展非常快

我习惯按应用场景对 Web Animation 进行分类

1. 静态与应用类：CSS3, DOM4

2. 三维系：WebGL API

3. 游戏类：Canvas API

4. 图表类：SVG，Canvas API

有一些会混合着用，不过本质上就是 CSS + JS

好食材需要好工具

1.Tumult Hype 3 面向设计师的动画软甲，强烈推荐

2.Adobe Edge Animate CC 面向设计师的动画软件2，配合全家桶一起食用更好

3.Animatron 在线制作动画，特长是 Banner

4.Ceaser CSS 贝塞尔曲线演示与调整

还有很多没什么◎用的工具就不放上了～

反正我是跪着看完了Give ’n’ Go，怎样才能复制 Dribbble Shot？

。。。当然我觉得最主要的工具还是 GUI 代码编辑器

在教程这块我看得非常杂

很多人推荐 W3C，但我很少看的，总觉得  W3C 会降低视力

推荐 MDN 的人值得深交！！！

不太有印象看过那种醍醐灌顶的文章

所以就列一下网站首页，实践还是 Google 好

1.CSS-Tricks 站如其名，善于使人变机智

2.CSS: Animations with Val Head Lynda 视频教程，感觉人跟头像对不上～

3.《CSS animations》 BY VAL HEAD 她还有一本小小书，可收藏她的个人网站

4.《Foundation HTML5 Animation with JavaScript》最优秀的 Canvas 动画书

还有 SitePoint，Tuts+，David Walsh，Impressive Webs 等都是很棒的综合文章网站

在动画库这块就多了，首先可以分为是否依赖 jQuery...

jQuery+生态圈，Velocity.js，Transit.js，GSAP.js

以上几个库能满足绝大部分静态站动画需求的

有些时候需求很明确，如视差滚动，页面切换，图片变换，粒子特效，加载进度条等

这时就需要去找满足具体需求的动画库

Awesomes 整理得不错，自己也需要建一个分类来收藏

代码片段与素材也好多的说，还是先挑几个好一点的

1.Codepen 最佳最全的动画实例，搜一次就停不下来

2.CSSDesk 别被名字骗了，有些特效还是有 JS，可以当作 Codepen 的备胎～

3.Envato 各种收费网页素材，我就看看没带钱！

4.Codrops 颜值最高的成品素材