.holder {

    width: 100px;
    height: 100px;
    background: rgb(0, 0, 0);
    border-radius: 100px;
    position: relative;
    display: inline-block;
    margin: 5px;

}

#ball1 {

    animation-name: move;
    animation-duration: 4.5s;
    animation-delay: 0.2s;

    animation-timing-function:cubic-bezier(0.325, 0.82, 0.165, 1);
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-direction: alternate;

} 

#ball2 {

    animation-name: move;
    animation-duration: 4.5s;
    animation-delay: 0.4s;
    animation-timing-function:cubic-bezier(0.325, 0.82, 0.165, 1);
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-direction: alternate;

} 

#ball3 {

    animation-name: move;
    animation-duration: 4.5s;
    animation-delay: 0.6s;
    animation-timing-function:cubic-bezier(0.325, 0.82, 0.165, 1);
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-direction: alternate;

} 

@keyframes move {

    0% {
        top: 15px;
        left: -85%;
        background-color: rgb(31, 31, 31);
    }

    25% {

        top: 35px;
        left: -40%;
        background-color: #505050;

    }

    50% {

        top: 15px;
        left: 0%;
        background-color: #7b7b7b;

    }

    75% {

        top: 35px;
        left: 40%;
        background-color: #505050;

    }



    100% {

        top: 15px;
        left: 85%;
        background-color: rgb(31, 31, 31);

    }

}


.box {
    width: 100px;
    height: 100px;
    background: rgb(0, 0, 0);
    position: relative;
    display: inline-block;
    margin: 5px;

    animation-name: move;
    animation-duration: 4.5s;
    animation-delay: 0.2s;

    animation-timing-function:cubic-bezier(0.325, 0.82, 0.165, 1);
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-direction: alternate;

    }

    @keyframes box {
        0% {
            left: -85%;
            background-color: rgb(31, 31, 31);
        }
    
        25% {
            left: -40%;
            background-color: #505050;
    
        }
    
        50% {
            left: 0%;
            background-color: #7b7b7b;
    
        }
    
        75% {
            left: 40%;
            background-color: #505050;
    
        }
    
    
    
        100% {
            left: 85%;
            background-color: rgb(31, 31, 31);
    
        }
}