《Web动画周报》第五期：小心驾驶

Web 动画周报，一周一刊，每周一发布。让我们来一起聊聊 Web 动画，和它们背后的故事。

本期亮点：Jon Kantner 为我们带来了他最新的 Three.js 小游戏《高速公路竞赛》，控制自己的汽车，一起在高速公路上飞驰吧！注意不要撞车哦。

周报将 Web 动画大致分为三类：CSS 动画、SVG 动画和 WebGL/Canvas 动画。所有的动画将按类别展示，方便读者有针对性的学习。

CSS 动画

1. 《旋转的圆圈》作者：Miracle Onyenma

这是一个纯 CSS 动画，而且作者没有使用任何的 CSS 3D 属性，靠着 2D transform 完成了一个带有三维错觉的动画。影子的巧妙使用很大程度上增强了 3D 的感觉。

2. 《相位》作者：Adam Dipinto

一个很适合用来当作加载动画的 CSS 3D 动画。圆圈其实就是 border 画的，在动的属性是 z 方向的位移，通过给每个圆圈设置不同的 animation-delay 实现类似弹簧的动画效果。

3. 《切换预览动画》作者：Mariusz Dabrowski

一个非常精致的切换动画，动画干净整洁，没有拖泥带水，还适配了移动端。控制逻辑是用 JS 写的，使用了一个叫做 GSAP 的动画库。GSAP 应该是目前在实际业务中用得最多的动画库了，很多写动画的大佬都推荐过，有兴趣的有同学可以去了解一下。这个动画库最大的特点是 API 设计非常人性化，好学易懂，但功能又非常强大。GSAP 这个库有目前有三个人在全职维护，所以不用担心会突然停止更新或者死掉，但是正因为是全职维护的原因，有些功能是需要收费的，不过免费版本足够满足一般的日常需求。

4. 《流星》作者：Yusuke Nakaya

这是一个纯 CSS 动画，为元素的巧妙使用让每一颗流星都只使用了一个 <div> 元素。作者还使用了 filter: drop-shadow() 这个 CSS 滤镜让流星看起来有在发光的感觉。filter: drop-shadow() 的作用跟 box-shadow 很相似：都是为元素添加阴影。但是 filter: drop-shadow() 作为 CSS 滤镜效果的一种，相比于 box-shadow 的好处就是在这个滤镜下的所有元素都会被添加上阴影，这样我们就不需要像 box-shadow 那样一个一个的去加了。