SCSS Передача переменной в ключевой кадр внутри миксина

Question

Я пытаюсь создать анимацию, которая включает в себя перемещение нескольких облаков на разных скоростях для анимации неба. В попытке создать повторно используемый код я перешел на миксины, но, похоже, столкнулся с проблемой.

Облака имеют разные начальные позиции (например, определенные справа: 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