CSS动画

 主页   资讯   文章   代码   电子书 

Animation recap

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

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

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

Homework challenge: Traffic lights

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

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

Recap: Animations

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

Like a transition, only different

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

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

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

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

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

animation: keyframe-name 2s forwards linear;

Keyframes

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

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

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

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

@keyframes name {
  100% {
    opacity: 0;
  }
}

Putting them together

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

.element {
  animation: keyframe-name ...
}
@keyframes keyframe-name {
  ...
}

Homework

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

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