.test1 {
  width: 10px;
  height: 10px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes example 
{
  0%  	 {background-color:red; left:0px; top:0px;}
  12.5%  {transform:rotate(90deg); background-color:orange; left:300px; top:0px;}
  25% 	 {transform:rotate(180deg); background-color:yellow; left:600px; top:0px;}
  37.5%  {transform:rotate(270deg); background-color:green; left:600px; top:100px;}
  50% 	 {transform:rotate(360deg); background-color:blue; left:600px; top:200px;}
  62.5%  {transform:rotate(450deg); background-color:lightblue; left:300px; top:200px;}
  75%    {transform:rotate(540deg); background-color:violet; left:0px; top:200px;}
  87.5%  {transform:rotate(630deg); background-color:indigo; left:0px; top:100px;}
  100%   {transform:rotate(720deg); background-color:red; left:0px; top:0px;}
}
  
#div1, #div2, #div3, #div4 
{
  float: left;
  vertical-align:middle;
  width: 60px;
  height: 60px;
  margin: 10px;
  padding: 10px;
  border: 2px solid blue;
}
  
#div5, #div6   {
  float: right;
  vertical-align:middle;
  width: 60px;
  height: 120px;
  margin: 10px;
  padding: 10px;
  border: 2px solid blue;
  }