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: mymove1; animation-duration: 3s; }
.element {animation-iteration-count: 15;}

@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; }
}