Stagger CSS3 Animation Timing

Question

I have a lot of .lines and I am applying a fading animation to them. I am wondering if there is a simple way to somehow stagger the animation timing so each one is triggered one after another (as oppose to all at once). In other words, I want to create an effect where the first .line would begin fading, then a second later the second .line would fade, then a second later the third .line would fade. This only needs to work in 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

Use nth-child to select each individual line then apply an animation-delay, like so:

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

Answer 2

A SASS solution might look something like this:

Here's the CodePen

styles.css

@import "compass/css3";

.my-element {
    @include transition(opacity 0.3s);
    @include opacity(0);
    @include inline-block;
    margin: 5px;
    width: 100px;
    height: 100px;
    background: tomato;

    // Loop through the items and add some delay.
    @for $i from 1 through 3 {
            &:nth-child(#{$i}) { 
             @include transition-delay(0.1s * $i); 
            }
        }

    .my-container:hover & {
        @include opacity(1);
    }
}

http://codepen.io/anon/pen/tngHy