sass - mixin内のキーフレームに変数を渡す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/で動作を再現できます