.cloud__big {
animation: float-clouds-right-to-left linear infinite;
animation-duration: 100s;
} @keyframes float-clouds-right-to-left {
0% {
transform: translateX(calc(20vw + 150px));
}
100% {
transform: translateX(-100vw);
}
}
.cloud__medium {
animation: float-clouds-left-to-right linear infinite;
animation-duration: 80s;
} @keyframes float-clouds-left-to-right {
0% {
transform: translateX(-33vw);
}
100% {
transform: translateX(calc(100vw + 150px));
}
}
.cloud__small {
animation: float-clouds-left-to-right-small linear infinite;
animation-duration: 40s;
}
@keyframes float-clouds-left-to-right-small {
0% {
transform: translateX(-44vw);
}
100% {
transform: translateX(calc(100vw + 150px));
}
}
.cutko-banner__clouds--video .cloud__medium {
animation: float-clouds-left-to-right-2 linear infinite;
animation-duration: 55s;
}
@keyframes float-clouds-left-to-right-2 {
0% {
transform: translateX(-33vw);
}
100% {
transform: translateX(calc(100vw + 150px));
}
} .cloud__small,
.cloud__medium,
.cloud__big {
position: absolute;
will-change: transform;
transition: transform 0.1s linear;
pointer-events: none;
}