CODEWITHSUNDEEP
csssass
2ne
2ne

Reputation: 5986

How to use SCSS/SASS to increase animation-delay for concurrent divs

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;
}

Upvotes: 23

Views: 25689

Answers (3)

dieppon
dieppon

Reputation: 71

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.

Upvotes: 6

DMTintner
DMTintner

Reputation: 14729

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.

Upvotes: 59

Francesco
Francesco

Reputation: 497

@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 ;)

Upvotes: 16

Related Questions