错开CSS3动画时间

我有很多.lines,我正在应用一个渐弱的动画.我想知道是否有一种简单的方法以某种方式错开动画时间,因此每一个都是一个接一个地触发(与所有一次相反).换句话说,我想创建一个效果,其中第一个.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>

解决方法

使用nth-child选择每个单独的行,然后应用动画延迟,如下所示：

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

原文地址：https://www.jb51.cc/css/215479.html