He creado el comienzo de una animación CSS3 como se muestra a continuación. He intentado usar @for y @each dentro de SCSS para crear un bucle que incremente los% 's y también el número de cada imagen de fondo. Mi conocimiento de SCSS avanzado como este es pobre, por lo que todo lo que he intentado ha sido absurdo y prueba y error basado en la lectura de los documentos de SCSS, y realmente no vale la pena publicarlo aquí.

¿Es posible usar SCSS de esta manera para ahorrar tener que escribir cada fotograma clave?

.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');
    }

Editar: La razón para crear la animación de esta manera es que la imagen es muy grande, por lo que una hoja de sprites está fuera de discusión.