#velocity_1 {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: black;

    position: relative;
        
    animation-name: oscillator;
    animation-duration: 2s; 
    animation-iteration-count: infinite;
}


#velocity_2 {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: black;

    position: relative;
        
    animation-name: oscillator;
    animation-duration: 0.8s; 
    animation-iteration-count: infinite;
}


#velocity_3 {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: black;

    position: relative;
        
    animation-name: oscillator;
    animation-duration: 0.05s; 
    animation-iteration-count: infinite;
}



@keyframes oscillator {

 0% {
        transform: translateX(0px);
    }

30% {
        transform: translateX(0px);
    }

40% {
        transform: translateX(500px);
    }

80% {
        transform: translateX(500px);
    }

90% {
        transform: translateX(0px);
    }
}