.box{
    height: 400px;
    width: 400px;
    background-color: tomato;
    margin: 100px auto;
    animation-name: square;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
@keyframes square{
   0%{
    background-color: tomato;
    left: 0;
    right: 0 ;

}
    25%{
        background-color: green;
        left: 500px;
        right: 0;

    }
     50%{
        background-color: blue;
        left: 500px;
        right: 500px;
        border-radius: 50%;

    }
     75%{
        background-color: orange;
        left: 0px;
        right: 500px


    }
      100%{
        background-color: rgb(255, 0, 0);
        left: 0;
        right: 0;
        border-radius: 0;
    }
       

}