Animations

目前为止,我们讨论了为什么需要动画,介绍了一些激发灵感的资源,也介绍了一些对开发有帮助的工具和网站,并且简单了解了过渡的概念。

下一步,让我来介绍一下 animation 属性。

Animation in the browser

过渡(transition)和动画(animation)是相似的。两者都是 CSS 的属性,并且都可以通过持续时间(duration),延迟(delay)以及其他属性控制浏览器制作动画效果。

当然也有不同,过渡指从一个状态到另一个状态的平滑的变化过程,而动画可以是多个“状态”间的变化。

Transitions: A to B

Animations: A to B to C

动画更适合相对复杂的场景。上面的例子中有三种状态(A,B,C)。transition 只会从A开始一直到C结束,而 animation 允许我们添加状态B,并且从A到B再到C经历完整的3个状态。

动画还有一点不同,它可以自动开始。过渡一般需要通过添加样式类或更改状态(如悬停)来触发,但动画可以在页面加载时自动启动。

Examples

Codepen 的“Save”按钮就是一个很好的例子。它能很好的让人们注意到这个按钮。

Save Button on CodePen

该效果是由一系列的keyframes组成,它们将告诉浏览器从左到右如何去摆动按钮。后面我们会深入研究 keyframes。

另一个示例是来自 Twitter 的 app 构建平台Fabric

Fabric hero image animation

最后,是我去年做的一个例子,这是一个 CSS Mac Plus,用来在网上 theWeb.is teaser site 展示欢迎信息。

Mac Plus created using CSS

CSS Mac Plus 可以在 CodePen 上面看到,这里是关于如何实现的指导。

Transitions vs. Animations

transition 是指从一种状态到另一种状态(A 到 B)的变化,通常是由某种“动作”触发,比如鼠标悬停,或者用 JavaScript 添加或删除样式类。

animation 更加复杂一些,它允许你按照实际需求添加很多的 keyframes 来创建动画。它可以自动触发,并且可以循环。

Transition vs Animation

后面我们会学习 animation 属性。多去找一些实际的应用例子,如果有不错的例子,记得告诉我!

Homework

浏览网页时要多多留意动画。当某物以某种方式移动以引起你的注意的时候,这通常就是一个 animation。

如果你已经下载 HTML 和 CSS 的脚手架,找到 animation 看一下,与 transition 不同,animation 还需要第二部分,称之为 keyframe。试着改变其中的一些值,看看会产生什么效果。