如今的 Web 页面动画的实现方式有很多种解决方案，比如使用原生 CSS3 Animation、使用 SVG SMIL Animation，甚至是使用各种社区免费的类库，像比较流行的 animate.js、GreenSock、但这些类库最底层的实现方式仍然脱离不开原生的支持。

所以学好 Web 动画开发，我们仍需搞清楚如何使用原生进行动画开发，再去让类库帮助我们扩展丰富的动画表现形式。

此系列不讨论如何使用 CSS3 进行动画开发，只专注于有关 SVG 的动画开发，探究 SVG 开发常见动画的原理，站在巨人的肩膀上，借助 GreenSock Animation Platform（GSAP） 进行丰富的动画开发。

这个系列在开始前，先来看看我们需要了解的知识，SVG、SVG SMIL Animation、CSS Animation、GreenSock。

<aside> 💡 此系列适合了解基础 CSS 属性，以及 SVG 基础知识的小伙伴食用

</aside>

文章目录

资源

<aside> 🔮 小册所有线上 Demo 整合在 CodePen Collection 中《SVG Animation Best Practices》

</aside>

GitHub 版本

小册准备了 GitHub 版本的阅读体验，传送门

移动端阅读