Question

我试图创建一个动画，其中包括以不同的速度移动几个云来动画天空。为了创建可重用的代码，我已经转移到了mixins，但我似乎遇到了问题。

云有不同的起始位置（例如由右边定义：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);
}

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

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

1 个答案: