.box{
    width: 100px;
    height: 100px;
    background-color: blue;
  animation-name:box-move;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-direction: none;

}



@keyframes box-move{
    0%{
        transform: translate(400px, 400px);
        background-color: red;
    }

    25%{
          transform: translate(200px, 400px);
        background-color: blue;
    }

    50%{

          transform: translate(200px, 600px);
        background-color: green;
    }

    75%{
          transform: translate(400px, 600px);
        background-color: yellow;
    }

    100%{
      transform: translate(400px, 400px);
        background-color: red;
    }
}