.square {
    width: 100px;
    height: 100px;
    animation: square-animation 8s infinite;
    position: absolute;
    left: 0;
    top: 0;
}

@keyframes square-animation {
    0% {
        background-color: red;
    }
    25% {
        /* top: 300px;
        left: 0; */
        transform: translate(0px, 300px);
        background-color: blue;
    }
    50% {
        /* left: 300px;
        top: 300px; */
        transform: translate(300px, 300px);
        background-color: green;
    }
    75% {
        /* top: 0;
        left: 300px; */
        transform: translate(300px, 0px);
        background-color: yellow;
    }
    100% {
        /* left: 0;
        top: 0; */
        transform: translate(0px, 0px);
        background-color: red;
    }
}