Create a loop using SCSS to change background images with CSS3 animate?

Question

I have created the beginning of a CSS3 animation as shown below. I have tried to use @for and @each within SCSS to create a loop which will increment the %\'s and also the n

Answer 1

Sass can only increment (or decrement) @for loops by 1. If you want a different interval, you need to use math to get there:

@-webkit-keyframes perimeter {
  @for $i from 0 through 39 {
    #{$i * 2.564102564102564%} {
      background-image: url('../img/perimeters/PerimeterFountains#{$i}.png');
    }
  }
}

Related: Rounding numbers in Sass and adjusting the amount of decimals