:root{
    --w: 100px;
    --d: calc(var(--w) / 5);
    --t: 6s;
}
div {
    position: relative;
    width: var(--w);
    height: var(--w);
    background: rgba(0,0,0,0.1);
}
div::before{
    content: "";
    display: block;
    width: var(--d);
    height: var(--d);
    aspect-ratio: 1;
    background: #000;
    border-radius: 100%;
    animation: a var(--t) infinite linear forwards;
    --a: pink;
    --b: red; 
    --c: purple;
}
div:nth-child(even)::before{
   --a: turquoise;
   --b: yellow; 
   --c: green;
    animation-delay: -3s;
}
@keyframes a {
    0% { transform: translate(var(--w), var(--w)) scaleX(1); background: var(--aa, black);}
    25% { transform: translate(var(--w), 0) scaleX(1); }
    49.9999% { transform: translate(0, var(--w)) scaleX(1); background: var(--aa, black);}
    50% { transform: translate(0, 0) scaleX(1); background: var(--bb, black);}
    65% { transform: translate(var(--w), var(--w)) scaleX(1);}
    85% { transform: translate(var(--w), 0) scaleX(1);}
    100% { transform: translate(0, var(--w)) scaleX(1); background: var(--cc, black);}
}