body{
  background: #333;
}

.box{
  background: white;
  width: 200px;
  height: 200px;
  position: relative;
  left: 200px;
  top: 200px;

  animation-name: myanimation;
  animation-duration: 4s;
  animation-iteration-count: 4;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes myanimation {
  0%{background-color: white; left: 200px; top: 200px;
    border-radius: 0 0 0 0;}
  25%{background-color: red; left: 500px; top: 200px;
    border-radius: 25% 25% 25% 25%;}
  50%{background-color: green; left: 500px; top: 500px;
    border-radius: 50% 50% 50% 50%;}
  75%{background-color: blue; left: 200px; top: 500px;
    border-radius: 25% 25% 25% 25%;}
  100%{background-color: white; left: 200px; top: 200px;
    border-radius: 0 0 0 0;}
}