.container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 500px;
}
.box{
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: move;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
@keyframes move{
   0%   {
        background-color: red; 
        transform: translate(0, 0); 
    }
  25%  {
        background-color: yellow; 
        transform: translate(160px, 0); 
    }
  50%  {
        background-color: green; 
        transform: translate(160px, 160px); 
    }
  75%  {
        background-color: blue; 
        transform: translate(0, 160px); 
    }
  100% {
         transform: translate(0, 0); 
        }
}