How to use SCSS/SASS to increase animation-delay for concurrent divs
I use this mixin:
@mixin delay($rule, $number, $value) {
@for $i from 1 to ($number + 1) {
&:nth-child(#{$i}) {
-webkit-#{$rule}-delay: (#{$i*$value});
#{$rule}-delay: (#{$i*$value});
}
}
}
.results div{
@include delay(animation, 8, 0.25s);
}
This way you can re use it transitions too.
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.
@for $i from 1 through 10 {
.results div:nth-child(#{$i}) {
-webkit-animation-delay:(#{$i*0.1s});
animation-delay:(#{$i*0.1s});
}
}
Better solution... I tested and it works ;)