I am new to CSS Animation. I got this animation working but it has some issues with speed when going from left -> right the animation works as expected but in case of right -> left (because of alternate which I need) the squares move too fast. How can I fix this. My intention is that only one square moves at a time which is visible in left to right animation.

Here’s my CSS for the animation.

Any help is appreciated.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #333;
    margin: 0;
}

.loader {
    position: relative;
    width: 14vh;
    height: 8vh;
}

.square {
    width: 2vh;
    height: 2vh;
    border-radius: 0.4vh;
    position: absolute;
    margin: 1vh;
}

.square.A {
    left: 0;
    top: 4vh;
    background-color: #31473A;
    -webkit-animation: moveA 6s infinite 0.25s alternate;
    animation: moveA 6s linear infinite 0.25s alternate;
}

.square.B {
    left: 3vh;
    top: 4vh;
    background-color: #26382E;
    -webkit-animation: moveB 6s infinite 0.5s alternate;
    animation: moveB 6s linear infinite 0.5s alternate;
}

.square.C {
    left: 6vh;
    top: 4vh;
    background-color: #1c2921;
    -webkit-animation: moveC 6s infinite 0.6s alternate;
    animation: moveC 6s linear infinite 0.6s alternate;
}

.square.E {
    left: 0;
    top: 0;
    background-color: #3B5144;
    -webkit-animation: moveE 6s infinite alternate;
    animation: moveE 6s linear infinite alternate;
}

@keyframes moveA {
    0% { top: 4vh; }
    5% { top: 6.5vh; left: 0; }
    10% { top: 6.5vh; left: 3vh; }
    15% { top: 4vh; left: 3vh; }
    100% { top: 4vh; left: 3vh; }
}

@keyframes moveB {
    0%, 5% { top: 4vh; left: 3vh; }
    12% { top: 1.5vh; left: 3vh; }
    20% { top: 1.5vh; left: 6vh; }
    25% { top: 4vh; left: 6vh; }
    100% { top: 4vh; left: 6vh; }
}

@keyframes moveC {
    0%, 15% { top: 4vh; left: 6vh; }
    25% { top: 6.5vh; left: 6vh; }
    35% { top: 6.5vh; left: 9vh; }
    40% { top: 4vh; left: 9vh; }
    100% { top: 4vh; left: 9vh; }
}

@keyframes moveE {
    0% { top: 0; left: 0; }
    10% { top: 4vh; left: 0; }
    100% { top: 4vh; left: 0; }
}

I tried using different animation (ease-in-out, linear etc.) but still didn’t get the intended behaviour. I also tried changing percentage of key frames but it messes up left -> right animation as well. What would be the best way to get the intended behaviour for both left -> right and right -> left?