demo-container { display: block; border: 2px solid rgb(189, 189, 189); padding: 25px 10px 10px; width: 180px; border-radius: 4px; height: 180px; }
demo-object { display: block; height: 40px; width: 40px; background-color: rgb(199, 255, 251); position: relative; animation-name: mymove2; animation-duration: 5s; animation-iteration-count: infinite; }

.element {animation-timing-function: ease;}

@keyframes mymove1 { 
  0% { left: 0px; }
  50% { left: 100px; }
  100% { left: 0px; }
}
@keyframes mymove2 { 
  0% { background: red; left: 0px; top: 0px; }
  25% { background: yellow; left: 100px; top: 0px; }
  50% { background: blue; left: 100px; top: 100px; }
  75% { background: green; left: 0px; top: 100px; }
  100% { background: red; left: 0px; top: 0px; }
}
@keyframes mymove3 { 
  0% { top: 0px; left: 0px; }
  100% { top: 100px; left: 100px; }
}