body {
  background: #eee;
}

.box {
  width: 600px;
  height: 450px;
  margin: 10px auto;
  box-sizing: border-box;
  /* border: 5px solid rgba(0,128,128,.5); */
  position: relative;
}

.b {
  box-sizing: border-box;
  position: absolute;
  opacity: .9;
  animation: rotate 4s linear infinite;
  -moz-animation: rotate 4s linear infinite;
  -webkit-animation: rotate 4s linear infinite;
}

.b1 {
  width: 250px;
  height: 250px;
  top: 100px;
  left: 50px;
  background:rgb(0,47,50);
  z-index:5;
  -moz-animation-delay:0;
  -webkit-animation-delay:0;
  animation-delay:0;
}

.b2 {
  width: 225px;
  height: 225px;
  top: 112.5px;
  left: 112.5px;
  background:rgb(66,130,108);
  z-index:4;
  -moz-animation-delay:.05s;
  -webkit-animation-delay:.05s;
  animation-delay:.05s;
}
.b3 {
  width: 200px;
  height: 200px;
  top: 125px;
  left: 167.5px;
  background:rgb(165,199,127);
  z-index:3;
  -moz-animation-delay:.1s;
  -webkit-animation-delay:.1s;
  animation-delay:.1s;
}
.b4 {
  width: 175px;
  height: 175px;
  top: 137.5px;
  left: 215px;
  background:rgb(255,200,97);
  z-index:2;
  -moz-animation-delay:.15s;
  -webkit-animation-delay:.15s;
  animation-delay:.15s;
}
.b5 {
  width: 150px;
  height: 150px;
  top: 150px;
  left: 255px;
  background:rgb(200,99,70);
  z-index:1;
  -moz-animation-delay:.2s;
  -webkit-animation-delay:.2s;
  animation-delay:.2s;
}


@-moz-keyframes rotate {
  0%   {-moz-transform:rotate(0deg)}
  100% {-moz-transform:rotate(360deg)}
}
@-webkit-keyframes rotate {
  0%   {-webkit-transform:rotate(0deg)}
  100% {-webkit-transform:rotate(360deg)}
}
@keyframes rotate {
  0%   {transform:rotate(0deg)}
  100% {transform:rotate(360deg)}
}