创建一个循环使用SCSS来改变背景图像与CSS3动画？ [英] Create a loop using SCSS to change background images with CSS3 animate?

问题描述

我已经创建了CSS3动画的开始，如下所示。我试图在SCSS中使用@for和@each创建一个循环，它将增加％的和每个背景图像的数量。我对这种先进的SCSS的知识很差，所以我试过的一切都是废话和试错，基于阅读SCSS文档 - 真的不值得张贴在这里。

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.

是否可以使用SCSS以这种方式保存必须键入每个关键帧？

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

编辑

推荐答案

Sass只能增加或递减） @for 循环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');
    }
  }
}

相关： Rassing in Sass

这篇关于创建一个循环使用SCSS来改变背景图像与CSS3动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！