keyframes.css

body{
    background: #333;
}
.box{
    background: white;
    width: 200px;
    height: 200px;
    position: relative;
    animation-name: myanimae;
    animation-duration: 4s;
    animation-iteration-count: 10;
    animation-delay: 1s;
    animation-direction: alternate;
    animation-fill-mode: forwards;

}

@keyframes myanimae{
    0%{ background-color: white; left:0px; top:0px;border-radius: 0 0 0 0; }
    25%{background-color: green; left:300px; top:0px; border-radius: 50% 0 0 0;}
    50%{background-color: yellow; left:300px; top:300px; border-radius: 50% 50% 0 0;}
    75%{background-color:red; left:0px; top:300px; border-radius: 50% 50% 50% 0;}
    100%{background-color: white; left:0px; top:0px; border-radius: 50% 50% 50% 50%;}

}