Stagger CSS3 Animation

Question

I have a lot of .line , and I apply fading animation to them. I am wondering if there is an easy way to somehow swing the animation timing so that each of them starts one after another (as against all at once). In other words, I want to create an effect when the first .line starts to disappear, then after a second the second .line will disappear, and then after a second the third .line will disappear. This is only needed 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, for example:

 .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 is 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