Animation properties

在我们看更多的例子之前,先来了解下 animation 的各个属性。

transition 一样,animation 可以使用简写形式,也可以分开单独指定属性值。

animation-delay

transition-delay 类似,此属性表示在开始之前动画的等待时间。在定义多个动画的情况下特别有用。

如果定义的动画是不断循环的,在这种情况下,delay 属性并不会每次循环都有效,只有在给元素添加上动画效果的时候才有效。(只有第一次循环前会有等待时间,其余的就没有了)

实际上可以给这个属性一个负值,比如-1s。动画会直接从第1s开始执行,就好像这1s时间已经过去了。

animation-direction

动画通常从 0% 开始,到 100% 结束。animation-direction 使用 normalreversealternatealternate-reverse 来控制动画变化的方向。(从开始到结束我们可以看作是一个有向的变化)

“Reverse”是指从 100% 播放(或循环)到 0%,而 “alternate” 指动画轮流反复播放,即从 0% 播放到 100% 然后再播放到 0%。

animation-duration

动画完成一个周期所需要的时间。类似于 transition-duration,以秒或毫秒计,如1s200ms

animation-fill-mode

默认情况下,动画播放完成元素返回其正常状态。使用 animation-fill-mode,我们可以定义元素在动画结束或开始前的状态。

使用 forwards 表示当动画完成后,元素属性保持最后一个关键帧的值。使用 backwards 表示动画完成后,元素属性变成第一帧(这个第一帧不是关键帧的第一帧,CodePen Demo)的值。【Tips:animation-fill-mode 除了这里说的两个之外还有多个可选值。】

例子:bouncer animation on Hop.ie。 使用 forwards,动画播放一次并在最后一帧结束。【Tips:这个例子貌似没有啊,我翻遍了也没找到】

这里添个例子来说明下 forwards 和 backwards(原作者并没有写)。
在这个例子里使用了 animation-delay 和 animation-fill-mode。从效果上来看,设置 backwards,点击“开始动画”之后,backwards 会立刻变成动画真实过程(animation-duration)第一帧的样子,一直持续整个 animation-delay 时间,然后开始变化,最后动画结束后又变回了最一开始没有添加动画时的状态。

Animation properties - 图1

animation-iteration-count

这是动画播放的次数。默认情况下,它将播放一次。也可以指定一个数字,或指定 “infinite” 以使其永久循环。

animation-name

animation-name 指的是动画使用的 keyframes 的名字。例如,如果 animation-name 设置为 “foo”,它将使用一组下面这样的关键帧,如:

  1. @keyframes foo {
  2. ...
  3. }

animation-play-state

如果您需要暂停或恢复动画,则可以使用此属性执行操作。值为 runningpaused,默认为 running。可以使用 JavaScript 设置此值,控制动画播放状态。

animation-timing-function

此属性与 transitions 中定时函数属性的值相同,但略有不同。在 transition里时间函数(例如 ease-out)是作用于整个 transition,但 animation 里是作用于关键帧之间。

这意味着以下关键帧将看到动画快速启动并减速至50%,然后快速开始并在100%之前减速。

  1. @keyframes foo {
  2. 0%{
  3. / *动画开始时变化速度很快,然后按照ease-out的时间函数,到50%之前越来越慢* /
  4. }
  5. 50%{
  6. / *然后又开始的时候很快,然后慢慢减速至100%的时候* /
  7. }
  8. 100%{
  9. / * 结束 * /
  10. }
  11. }

这看起来有些复杂。通常在创建关键帧动画时,我会选择 linear,用使用 keyframes 控制动画的节奏。

cubic-bezier 与动画一起使用可以产生一些很好的效果,大家可以尝试一下。

Using timing functions within keyframes

值得注意的是,当为动画指定时间函数时,这个函数会应用到动画的每个关键帧之间。

也就是说如果有四个关键帧,并且使用 ease-out,那么在上一帧与下一帧之间,变化速度会越来越慢。

所以我们通常会将动画的计时功能定义为 linear,然后在每个关键帧的上控制速度:

  1. @keyframes my-animation {
  2. 0%{
  3. ...
  4. animation-timing-function: linear;
  5. }
  6. 50%{
  7. ...
  8. animation-timing-function: ease-out;
  9. }
  10. }

在这种情况下,动画的前半部分将是线性的,而后半部分将使用 ease-out 计时功能。

Homework

这里有一个例子。尝试更改其中一些属性,看看会发生什么。