Multiple animations

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

Traffic lights

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

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

    .red {
      animation: red 10s linear infinite;
    }
    .amber {
      animation: amber 10s linear infinite;
    }
    .green {
      animation: green 10s linear infinite;
    }

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

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

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

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

    @keyframes red {
      0% {
        background: black;
      }
      2%, 40% {
        background-color: red;
      }
      42%, 100% {
        background: black;
      }
    }

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

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

    @keyframes amber {
      0%, 20% {
        background: black;
      }
      22%, 40% {
        background: #FF7E00;
      }
      42%, 80% {
        background: black;
      }
      82%, 100% {
        background: #FF7E00;
      }
    }

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

    @keyframes green {
      0%, 40% {
        background: black;
      }
      42%, 80% {
        background: green;
      }
      82%, 100% {
        background: black;
      }
    }

Further reading

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

Homework

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