目前为止，我们已经讨论了很多细节，我希望这对你们是有帮助的。
当我学习这个的时候，我必须承认我花了一些时间来深入了解动画和关键帧。如果到现在你还不是特别了解，不要灰心沮丧。坚持下去，你将会逐渐掌握使用动画的技巧。
在本章中，我们将花一点时间来回顾一下之前学习过的内容。首先，让我们来看看作业挑战！
如果你知道该怎么做的话，这个家庭作业挑战应该很简单。我已经写了一个英国交通灯的示例，请更改顺序，删除「红灯---黄灯」的阶段。
看这里，我已经使颜色组合符合美国交通灯的样子。
在这一章节，我们学习了 animation 属性，以及该如何使用它和 keyframes。
虽然 animation 属性的表现效果以及工作原理与 transition 类似，但是它还是有一些细微的差别。过渡仅在元素发生变化时才会发生，而动画可以立刻开始。
使用各种属性，动画可以循环一定次数（或者永远循环下去），甚至可以从一个负值开始延迟，这就会以已经进行的动画开始。
默认情况下，动画都会从头到尾播放，然后跳到它们的默认状态。我们可以使用 forward 的 animation-direction 属性让动画在它结尾时定格。
动画用到了 timing-function，这一点很像过渡。然而，timing-function 是用在每一个的 keyframe，并不是整个的 keyframes。相反地，你可以在 keyframe 中指定 animation-timing-function 进行更细粒度的控制。
最后，动画可以用简写方式来指定，就像过渡一样：
animation: keyframe-name 2s forwards linear;每一个动画都需要引用一组的 keyframes。这些 keyframe 是一系列百分比，描述了动画的每个“阶段”。而浏览器会自动填充其间隙。
当您只想从一个状态转换到另一个状态时，keyframe 有它们自己的名称（to 和 from）。
在这段时间里，相互叠加的百分比可以让动画暂停。
最后，可以忽略0%关键帧，而浏览器可以使用元素默认的样式。例如，想让某样东西渐渐消失，我们不需要设置它的初始透明度为1（假设元素已经存在）：
@keyframes name {
100% {
opacity: 0;
}
}如果想要使用动画，必须按照如下的格式：
.element {
animation: keyframe-name ...
}
@keyframes keyframe-name {
...
}目前为止，我们应该清楚了动画属性和过渡属性的区别了吧。
看看 Principles of Animation for the Web 上面的例子。每一个例子都包含了 HTML 和 CSS，以及关键帧动画。尝试着去修改一个吧。