.container{
    width: 680px;
    height: 630px;
    outline: 2px solid blueviolet;
    margin: 25px auto;
}

.box{
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: square;
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(0.7, 0.71, 0.56, 0.78);
    animation-iteration-count: infinite;
}

@keyframes square{
    0%{
        background-color: red;
        transform: translate(0);
    }
    25%{
        background-color: blue;
        transform: translate(0, 500px);
    }
    50%{
        background-color: green;
        transform: translate(500px, 500px);
    }
    75%{
        background-color: yellow;
        transform: translate(500px, 0);
    }
    100%{
        background-color: red;
        transform: translate(0);
    }
}