Multiple animations

这一节我们看一下怎样同时使用多个 animation

Traffic lights

有这么种情况:一个页面上会有好几个 animation，每个 animation 都有自己的时间设置，我们希望这些 animation 保持同步，最好的例子就是交通灯了。【TIPS：同步的意思是说，希望这些 animation 之间保持一种确定的时间关系。】

Source: http://codepen.io/donovanh/pen/ogRRdR?editors=010

这里有3盏灯，我们为每一盏灯写了一个 animation

  1.     .red {
  2.       animation: red 10s linear infinite;
  3.     }
  4.     .amber {
  5.       animation: amber 10s linear infinite;
  6.     }
  7.     .green {
  8.       animation: green 10s linear infinite;
  9.     }

从上面样式里看出，每盏灯的 animation 持续时间都是10s，那动画不断循环播放的时候，它们之间就会一直保持同步的时间关系。

参照下面的图，从功能出发，很容易理解3盏灯的动画之间的逻辑关系（在这里逻辑关系就是指的它们之间的时间关系）

Multiple animations - 图2

从图中看，一共分5个阶段或者说5个步骤，在每个阶段，不同的灯处于 on 或者 off 的状态。那么我们很明显就是将0% - 100%的时间跨度分成5份,每20%为一个状态，设置不同状态下的参数。

我们从红灯开始看。0%-20% 和 20%-40%，这两个阶段红灯一直亮的，其余的时间都是黑的。那我们可以这么设置：

  1.     @keyframes red {
  2.       0% {
  3.         background: black;
  4.       }
  5.       2%, 40% {
  6.         background-color: red;
  7.       }
  8.       42%, 100% {
  9.         background: black;
  10.       }
  11.     }

这里有2%的间隙，是为了让灯看起来有点渐变的效果。可以按照20%``40%去写

同理，黄灯是20%-40%和80%-100%亮，其余时间不亮。这里也加了2%的间隙。

  1.     @keyframes amber {
  2.       0%, 20% {
  3.         background: black;
  4.       }
  5.       22%, 40% {
  6.         background: #FF7E00;
  7.       }
  8.       42%, 80% {
  9.         background: black;
  10.       }
  11.       82%, 100% {
  12.         background: #FF7E00;
  13.       }
  14.     }

绿灯也很简单，按照图上显示的，来设置它。

  1.     @keyframes green {
  2.       0%, 40% {
  3.         background: black;
  4.       }
  5.       42%, 80% {
  6.         background: green;
  7.       }
  8.       82%, 100% {
  9.         background: black;
  10.       }
  11.     }

Further reading

想了解更多，欢迎阅读 CSS tricks article on the subject

Homework

例子中的交通灯是按照 UK 的规则来的，你可以尝试修改参数，将其改成其他规则的，看看效果怎么样。