Animation recap

目前为止，我们已经讨论了很多细节，我希望这对你们是有帮助的。

当我学习这个的时候，我必须承认我花了一些时间来深入了解动画和关键帧。如果到现在你还不是特别了解，不要灰心沮丧。坚持下去，你将会逐渐掌握使用动画的技巧。

在本章中，我们将花一点时间来回顾一下之前学习过的内容。首先，让我们来看看作业挑战！

Homework challenge: Traffic lights

如果你知道该怎么做的话，这个家庭作业挑战应该很简单。我已经写了一个英国交通灯的示例，请更改顺序，删除「红灯—-黄灯」的阶段。

看这里，我已经使颜色组合符合美国交通灯的样子。

Recap: Animations

在这一章节，我们学习了 animation 属性，以及该如何使用它和 keyframes。

Like a transition, only different

虽然 animation 属性的表现效果以及工作原理与 transition 类似，但是它还是有一些细微的差别。过渡仅在元素发生变化时才会发生，而动画可以立刻开始。

使用各种属性，动画可以循环一定次数（或者永远循环下去），甚至可以从一个负值开始延迟，这就会以已经进行的动画开始。

默认情况下，动画都会从头到尾播放，然后跳到它们的默认状态。我们可以使用 forward 的 animation-direction 属性让动画在它结尾时定格。

动画用到了 timing-function，这一点很像过渡。然而，timing-function 是用在每一个的 keyframe，并不是整个的 keyframes。相反地，你可以在 keyframe 中指定 animation-timing-function 进行更细粒度的控制。

最后，动画可以用简写方式来指定，就像过渡一样：

  1. animation: keyframe-name 2s forwards linear;

Keyframes

每一个动画都需要引用一组的 keyframes。这些 keyframe 是一系列百分比，描述了动画的每个“阶段”。而浏览器会自动填充其间隙。

当您只想从一个状态转换到另一个状态时，keyframe 有它们自己的名称（to 和 from）。

在这段时间里，相互叠加的百分比可以让动画暂停。

最后，可以忽略0%关键帧，而浏览器可以使用元素默认的样式。例如，想让某样东西渐渐消失，我们不需要设置它的初始透明度为1（假设元素已经存在）：

  1. @keyframes name {
  2.   100% {
  3.     opacity: 0;
  4.   }
  5. }

Putting them together

如果想要使用动画，必须按照如下的格式：

  1. .element {
  2.   animation: keyframe-name ...
  3. }
  4. @keyframes keyframe-name {
  5.   ...
  6. }

Homework

目前为止，我们应该清楚了动画属性和过渡属性的区别了吧。

看看 Principles of Animation for the Web 上面的例子。每一个例子都包含了 HTML 和 CSS，以及关键帧动画。尝试着去修改一个吧。