SCSS Passing variable to keyframe inside a mixin - sass

Question

I'm trying to create an animation which involves moving several cloud at different speeds to animate a sky. In an attempt to create reusable code I have moved to mixins but I seem to have run in a problem.
The clouds have different starting positions (e.g defined by right: 100px - passed at $startpos).
On the initial pageload the clouds are at the correct position but the animation starts from a random right position.
my scss code is looking like this
#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);
}
the behaviour can be reproduced on https://meshto.space/, after hovering on the exclamation mark

Answer 1

So I managed to figure this out with some more experimenting.
It seems that keyframe animations are not wrapped up inside a scope and need to have a unique name. The behavior above was actually not random and changed the right offset to -1500 for both clouds once the animation was started.
i.e. all your animations need to have unique names.
The code above was changed to
#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);
}
Would appreciate if there are neater solutions to this problem :). Ty