Welcome

“Tell me and I forget. Teach me and I remember. Involve me and I learn.” Benjamin Franklin

欢迎来到 CSS Animation 101,感谢你选择这本书。

很高兴你选择学习 CSS Animation,本书会以轻松有趣的方式来介绍这个话题,希望能够带给你帮助。

我们会学习 CSS 中的 transitions 以及 animations 。我相信,当你读完本书之后,你会对 CSS animations 有一个更深的理解,也会在工作中更好地使用它。

在本书中,我们会学习如何搭建自己的开发环境,然后学习一些 animation 的例子。

Hello,I’m Donovan

Donovan Hutchinson

大家好,我叫 Donovan ,是一名设计师和前端工程师。工作时间,我会依照 UX 的设计原则进行网站动效设计,以提升网站的用户体验。业余的时候我就会写一些文章。我写过很多关于 CSS 的文章,也在 Smashing Magazine, Net Magazine, Tuts+, Adobe Inspire 上发表过很多。这是我的个人网站 Hop.ie

今年以来,我一直在 cssanimation.rocks 上写教程,主要是关于网页动效的,欢迎大家一起交流。

本书主要介绍 CSS 中的动画 (CSS animation) ,目的就是让大家了解 transitionanimation 这些属性是干嘛的,内部的原理,以及如何使用。

等读完这本书,我相信大家一定可以在开发过程中运用这些技巧了。

Book structure

本书涵盖以下内容:

  1. 什么是动画(animation)?我将解释一下为啥我们需要动画,并且会简单介绍 transitionanimation 属性,然后给大家看一些例子。
  2. transition 属性。我们将会学习 transitions 的原理,以及如何控制它来制作动效。
  3. animation 属性。我们将学习怎样使用 keyframe 来制作比 transition 复杂的多的动效。
  4. 通过几个复杂的例子学习如何将 transition 和 animation 结合起来使用。还会向大家介绍一些有用的 CSS 资源和 JavaScript 工具。

Help and support

如果大家有什么想法或者疑问,欢迎大家通过邮件(donovan@cssanimation.rocks),或者 Twitter (@donovanh)联系我。

Need to brush up on your CSS?

如果你是一个 CSS 新手,那你需要熟悉一下 CSS 的基础知识。基本上你只要了解什么是 CSS,什么是 CSS 属性就可以了。

这里有一些不错的入门资源推荐给大家:

Homework

每一章节后面都会有一个课后作业的部分,我会给大家出一些小题目,目的是让大家更好的学习以及巩固知识。做不做完全取决于你,当然,我建议大家最好都去想一下做一下,你会发现自己对 CSS 动画的理解会更加深刻。

准备好了么?让我们开始吧!