@keyframes bounce {
    0% {
        animation-timing-function: ease-in;
        transform: translate(0);
    }
    
    47% {
        transform: translate(0, 500px);
    }

    50% {
        animation-timing-function: ease-in;
        transform-origin: bottom;
        transform: translate(0, 500px) scale(120%, 70%);
    }
    53% {
        animation-timing-function: ease-out;
        transform: translate(0, 500px) scale(100%, 120%);
    }

    98% {
        animation-timing-function: ease-out;
        transform: translate(0);
    }

}

@keyframes toSide {
    0% {
        transform-origin: left;
        transform: translateX(-250px) scale(80%, 100%);
    }
    2% {
        transform: translateX(-250px);
    }
    
    48% {
        transform: translateX(250px);
    }
    50% {
        transform-origin: right;
        transform: translateX(250px) scale(80%, 100%);
    }
    52% {
        transform: translateX(250px);   
    }
    
    98% {
        transform: translateX(-250px);
    }
    100% {
        transform-origin: left;
        transform: translateX(-250px) scale(80%, 100%);
    }
}


p {
    margin: auto;
    text-align: center;
    width: 600px;
}

.container  {
    height: 600px;
    width: 600px;
    border: 5px black solid;
    border-top: none;
    margin: 1rem auto;
    display: flex;
    justify-content: center;
}

.ball {
    height: 100px;
    width: 100px;
    background-color: red;
    border-radius: 50%;
    animation: bounce 1.5s infinite ;
}


.toSide {
    animation: toSide 2.1s infinite linear;
}