css - 错开 CSS3 动画时间

Question

我有很多 .line，我正在为它们应用淡入淡出的动画。我想知道是否有一种简单的方法可以以某种方式错开动画时间，以便一个接一个地触发每个动画(而不是一次全部触发)。换句话说，我想创建一种效果，其中第一个 .line 会开始淡出，然后一秒钟后第二个 .line 会淡出，然后一秒后第三个.line 会褪色。这只需要在 Chrome 中工作。

div.line { width: 300px; height:5px; background:red;
           -webkit-animation: fade 20s infinite;
           -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fade {
    0%   { opacity:1.0; }
    50%  { opacity:0.0; }
    100% { opacity:1.0; }
}


<div class="line"></div>
<div class="line"></div>
...
<div class="line"></div>

Answer 1

使用第 nth-child 选择每一行，然后应用动画延迟，如下所示:

.line:nth-child(1) {
    -webkit-animation-delay: 1s;
}
.line:nth-child(2) {
    -webkit-animation-delay: 2s;
}