SCSS将变量传递给mixin中的关键帧

Question

我正在尝试创建一个动画，其中涉及以不同的速度移动多朵云以使天空具有动画效果。为了创建可重用的代码，我已经转向混合，但我似乎运行遇到了问题。

云有不同的起始位置（例如由 right 定义：100px - 在 $startpos 处传递）。在初始页面加载时，云彩位于正确的位置，但动画从随机的正确位置开始。

我的 scss 代码看起来像这样

@keyframes fadein {
    from { opacity: 0 }
    to   { opacity: 1 }
}

@mixin cloud($height, $width, $bg, $startpos, $slowanim, $fastanim) {
    background: url($bg) no-repeat;
    background-size: contain;
    border: none;

    height: $height; // 800
    width: $width; // 800

    position: absolute;
    right: $startpos;

    opacity: 1;
    animation: movecloudA $fastanim infinite;

    &.animate {
        animation: fadein 5s, movecloud $slowanim infinite;
        opacity: 1;
    }

    @include keyframes(movecloud) {
        0% { right: $startpos; }
        100% { right: 100%; animation: movecloud $slowanim infinite;}
    }

}

.cloudA {
    @include cloud(800px, 800px, 'assets/cloudA.svg', -100px, 5s, 1s)
    bottom: -400px;
}

.cloudB {
    @include cloud(1200px, 1200px, 'assets/cloudB.svg', -1500px, 9s, 5s)
    bottom: -800px;
    transform: rotate(360deg);
}

将鼠标悬停在感叹号

上后，可以在 https://meshto.space/ 上重现该行为

Answer 1

所以我通过更多的实验设法解决了这个问题。

关键帧动画似乎没有包裹在一个范围内，需要有一个唯一的名称。上面的行为实际上不是随机的，并且在动画开始后将两个云的正确偏移量更改为 -1500。

即您所有的动画都需要有唯一的名称。

上面的代码改为

@keyframes fadein {
    from { opacity: 0 }
    to   { opacity: 1 }
}

@mixin cloud($bg, $anim, $height, $width, $startpos, $slowanim, $fastanim) {
    background: url($bg) no-repeat;
    background-size: contain;
    border: none;

    height: $height; // 800
    width: $width; // 800

    position: absolute;
    right: $startpos;

    opacity: 1;
    // animation: movecloudA $fastanim infinite;

    &.animate {
        animation: fadein 5s, $anim $slowanim infinite;
        opacity: 1;
    }

    @include keyframes($anim) {
        0% { right: $startpos; }
        100% { right: 100% }
    }

}

.cloudA {
    @include cloud('assets/cloudA.svg', cloudAnimA, 800px, 800px, -100px, 5s, 1s)
    bottom: -400px;
}

.cloudB {
    @include cloud('assets/cloudB.svg', cloudAnimB, 1200px, 1200px, -1500px, 9s, 5s)
    bottom: -800px;
    transform: rotate(360deg);
}

如果有更简洁的解决方案来解决这个问题，我们将不胜感激:)。泰

SCSS将变量传递给mixin中的关键帧

SCSS Passing variable to keyframe inside a mixin

sass

scss-mixins