Eu criei o início de uma animação CSS3, como mostrado abaixo. Eu tentei usar @for e @each dentro do SCSS para criar um loop que aumentará os% 's e também o número de cada imagem de plano de fundo. Meu conhecimento sobre SCSS avançado como esse é ruim, então tudo o que tentei foi sem sentido, sem tentativa e erro, com base na leitura dos documentos do SCSS - e realmente não vale a pena postar aqui.

É possível usar o SCSS dessa maneira para evitar a necessidade de digitar cada quadro-chave?

.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: A razão para criar a animação dessa maneira é que a imagem é muito grande, portanto, uma folha de sprite está fora de questão.