.main {
    display: flex;
    justify-content: center;
    align-items: center;
}

.keyframes-box {
    width: 300px;
    height: 300px;
    border: 10px solid black;
    padding: 20px;
}

.keyframes {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: keyFrame 5s infinite;
}

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