Untitled

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  var degs = 360/$("#test").children().size();
  for (var i=1;i<=$("#test").children().size();++i)
  {
    $("#test > div:nth-child("+i+")").css("transform", "rotate("+(i*degs)+"deg)");
  }
});
</script>
<style>
*
{
padding: 0;
margin: 0;
border: none;
}
#test{
height: 100px;
width: 100px;
animation:mymove 5s linear infinite;
-webkit-animation:mymove 5s linear infinite; /*Safari and Chrome*/
}
#test > div
{
height: 100px;
width: 100px;
text-align: center;
position:absolute;
margin: auto;
}

@keyframes mymove
{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
</style>
</head>
<body>

<div id="test">
<div>1</div>
<div>1</div>
<div>1</div>
<div>0</div>
<div>1</div>
<div>0</div>
<div>1</div>
<div>0</div>
<div>0</div>
<div>1</div>
<div>1</div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>1</div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>1</div>
</div>

</body>
</html>