I am trying to replicate the loading animation of the Windows 8 tiles. It seems that each tile has an animation delay which is slightly higher than its predecessor. I have been acheiving this currently by using nth-child in an inefficient way as you can see below. Does anyone know a way that I can achieve this in a more efficient manner that would cater for any number of divs?
DEMO
.results div:nth-child(1) {
animation-delay: 0.25s;
}
.results div:nth-child(2) {
animation-delay: 0.5s;
}
.results div:nth-child(3) {
animation-delay: 0.75s;
}
.results div:nth-child(4) {
animation-delay: 1s;
}
.results div:nth-child(5) {
animation-delay: 1.25s;
}
.results div:nth-child(6) {
animation-delay: 1.5s;
}
.results div:nth-child(7) {
animation-delay: 1.75s;
}
.results div:nth-child(8) {
animation-delay: 2s;
}
You can use a for loop in Sass to do this like so:
@for $i from 1 to 10 {
.results div:nth-child(#{$i}) { animation-delay: $i * 0.25s; }
}
Then you can do it for any number of divs by making the 10 to what ever you need.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With