<div></div>

div{
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate-reverse;
/*   animation-direction: alternate */
}
/* @keyframes example{
  from {background: red}
  to{background: blue}
} */
@keyframes example{
  0% {background: red; left: 0px; top: 0px}
  25% {background: blue; left: 200px; top: 0px}
  50% {background: green;left: 200px; top: 200px}
  75% {background: yellow;left: 0px; top: 200px}
  100% {background: red;left: 0px; top: 0px}
}