css - 使用 SCSS 创建循环以使用 CSS3 动画更改背景图像？

Question

我创建了一个 CSS3 动画的开头，如下所示。我尝试在 SCSS 中使用 @for 和 @each 来创建一个循环，该循环将递增 % 以及每个背景图像的数量。我对像这样的高级 SCSS 的了解很差，所以我尝试的一切都是基于阅读 SCSS 文档的废话和反复试验 - 真的不值得在这里发布。

是否可以通过这种方式使用 SCSS 来避免输入每个关键帧？

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

编辑: 以这种方式创建动画的原因是图像非常大，因此无法使用 sprite 表。

Answer 1

Sass 只能递增(或递减)@for 循环 1。如果你想要一个不同的间隔，你需要使用数学来实现:

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

相关:Rounding numbers in Sass and adjusting the amount of decimals