SOURCE

 <div>
  </div>

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: myfirst 5s;
  -webkit-animation: myfirst 5s;
  /* Safari and Chrome */
}

@keyframes myfirst {
  0% {
    background: red;
    left: 0px;
    top: 0px;;
    
  }
  25% {
    background: yellow;
    left: 200px;
    top: 0px;
     box-shadow: 15px 10px 5px;
  }
  50% {
    background: blue;
    left: 200px;
    top: 200px;
     box-shadow: 15px 15px 5px;
  }
  75% {
    background: green;
    left: 0px;
    top: 200px;
     box-shadow: 5px 15px 5px;
  }
  100% {
    background: red;
    left: 0px;
    top: 0px;
  }
}

@-webkit-keyframes myfirst
/* Safari and Chrome */

{
  0% {
    background: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background: red;
    left: 0px;
    top: 0px;
  }
}