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 number of each background image. My knowledge of advanced SCSS like this is poor, so everything I have tried has been nonsense and trial and error based on reading the SCSS docs - and really not worth posting here.

Is it possible to use SCSS in this way to save having to type each keyframe?

.perimeterAnim {
    background-image: url('../img/perimeters/PerimeterFountains00.png');
    -webkit-animation: perimeter 5s infinite;
    -moz-animation: perimeter 5s infinite;
    -o-animation: perimeter 5s infinite;
    -ms-animation: perimeter 5s infinite;
    animation: perimeter 5s infinite;
}


@-webkit-keyframes perimeter {
    0% {
        background-image: url('../img/perimeters/PerimeterFountains00.png');
    }

    2.564102564102564% {
        background-image: url('../img/perimeters/PerimeterFountains01.png');
    }

    5.128205128205128% {
        background-image: url('../img/perimeters/PerimeterFountains02.png');
    }

    7.692307692307692% {
        background-image: url('../img/perimeters/PerimeterFountains03.png');
    }

Edit: The reason for creating the animation in this way is that the image is very large, so a sprite sheet is out of the question.

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