8

がたくさんあり、.lineそれらにフェード アニメーションを適用しています。アニメーションのタイミングを何らかの方法でずらして、それぞれが次々とトリガーされるようにする簡単な方法があるかどうか疑問に思っています（一度にすべてではなく）。言い換えれば、1番目がフェードし始め、 .line1 秒後に 2 番目.lineがフェードし、1 秒後に 3 番目.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>
4

2 に答える 2

11

nth-child を使用して個々の行を選択し、次のようにアニメーションの遅延を適用します。

.line:nth-child(1) {
    -webkit-animation-delay: 1s;
}
.line:nth-child(2) {
    -webkit-animation-delay: 2s;
}
于 2012-12-18T23:33:44.243 に答える