.box1{
  width: 100px;
  height: 100px;
  background: red;
  animation-delay:3s;
  animation-duration:4s;
  animation-name: example;
  position:relative;
  animation-iteration-count:infinite;
}
.box2{
  width: 100px;
  height: 100px;
  background: blue;
  animation-duration:6s;
  animation-name: example;
  position:relative;
  animation-iteration-count:infinite;
}
.box3{
  width: 100px;
  height: 100px;
  background: yellow;
  animation-duration:2s;
  animation-name: example;
  position:relative;
  animation-iteration-count:infinite;
}

/* The animation code */
@keyframes example {
  0%   {background-color:pink; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:50px;}
}

/* The element to apply the animation to */
/*  要重複跑幾次，或者是用 infinite 一直持續跑   */
/*   animation-iteration-count: infinite; * /
  
/*  停留在哪個影格  forwards、backwards、both */
/*   animation-fill-mode: backwards; */
/* 
  forwards 停留在最後一個位置   
  backwards: 留在第一個位置
  both 擁有前兩者功能
  */
}