.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  background: #222;
  color: #fff;
  font-family: 'Open Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.frame:hover .rect {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.rect {
  box-sizing: border-box;
  position: absolute;
  border: 1px solid #888;
  background: #222;
}

.rect-1 {
  z-index: 1;
  width: 200px;
  height: 200px;
  top: 100px;
  left: 100px;
  border-color: #4e4e4e;
  -webkit-animation: rotate 2s ease-in-out 0.0333333333s alternate infinite;
          animation: rotate 2s ease-in-out 0.0333333333s alternate infinite;
}

.rect-2 {
  z-index: 2;
  width: 190px;
  height: 190px;
  top: 105px;
  left: 105px;
  border-color: #565656;
  -webkit-animation: rotate 2s ease-in-out 0.0666666667s alternate infinite;
          animation: rotate 2s ease-in-out 0.0666666667s alternate infinite;
}

.rect-3 {
  z-index: 3;
  width: 180px;
  height: 180px;
  top: 110px;
  left: 110px;
  border-color: #5e5e5e;
  -webkit-animation: rotate 2s ease-in-out 0.1s alternate infinite;
          animation: rotate 2s ease-in-out 0.1s alternate infinite;
}

.rect-4 {
  z-index: 4;
  width: 170px;
  height: 170px;
  top: 115px;
  left: 115px;
  border-color: #666666;
  -webkit-animation: rotate 2s ease-in-out 0.1333333333s alternate infinite;
          animation: rotate 2s ease-in-out 0.1333333333s alternate infinite;
}

.rect-5 {
  z-index: 5;
  width: 160px;
  height: 160px;
  top: 120px;
  left: 120px;
  border-color: #6e6e6e;
  -webkit-animation: rotate 2s ease-in-out 0.1666666667s alternate infinite;
          animation: rotate 2s ease-in-out 0.1666666667s alternate infinite;
}

.rect-6 {
  z-index: 6;
  width: 150px;
  height: 150px;
  top: 125px;
  left: 125px;
  border-color: #767676;
  -webkit-animation: rotate 2s ease-in-out 0.2s alternate infinite;
          animation: rotate 2s ease-in-out 0.2s alternate infinite;
}

.rect-7 {
  z-index: 7;
  width: 140px;
  height: 140px;
  top: 130px;
  left: 130px;
  border-color: #7e7e7e;
  -webkit-animation: rotate 2s ease-in-out 0.2333333333s alternate infinite;
          animation: rotate 2s ease-in-out 0.2333333333s alternate infinite;
}

.rect-8 {
  z-index: 8;
  width: 130px;
  height: 130px;
  top: 135px;
  left: 135px;
  border-color: #868686;
  -webkit-animation: rotate 2s ease-in-out 0.2666666667s alternate infinite;
          animation: rotate 2s ease-in-out 0.2666666667s alternate infinite;
}

.rect-9 {
  z-index: 9;
  width: 120px;
  height: 120px;
  top: 140px;
  left: 140px;
  border-color: #8e8e8e;
  -webkit-animation: rotate 2s ease-in-out 0.3s alternate infinite;
          animation: rotate 2s ease-in-out 0.3s alternate infinite;
}

.rect-10 {
  z-index: 10;
  width: 110px;
  height: 110px;
  top: 145px;
  left: 145px;
  border-color: #969696;
  -webkit-animation: rotate 2s ease-in-out 0.3333333333s alternate infinite;
          animation: rotate 2s ease-in-out 0.3333333333s alternate infinite;
}

.rect-11 {
  z-index: 11;
  width: 100px;
  height: 100px;
  top: 150px;
  left: 150px;
  border-color: #9e9e9e;
  -webkit-animation: rotate 2s ease-in-out 0.3666666667s alternate infinite;
          animation: rotate 2s ease-in-out 0.3666666667s alternate infinite;
}

.rect-12 {
  z-index: 12;
  width: 90px;
  height: 90px;
  top: 155px;
  left: 155px;
  border-color: #a6a6a6;
  -webkit-animation: rotate 2s ease-in-out 0.4s alternate infinite;
          animation: rotate 2s ease-in-out 0.4s alternate infinite;
}

.rect-13 {
  z-index: 13;
  width: 80px;
  height: 80px;
  top: 160px;
  left: 160px;
  border-color: #aeaeae;
  -webkit-animation: rotate 2s ease-in-out 0.4333333333s alternate infinite;
          animation: rotate 2s ease-in-out 0.4333333333s alternate infinite;
}

.rect-14 {
  z-index: 14;
  width: 70px;
  height: 70px;
  top: 165px;
  left: 165px;
  border-color: #b6b6b6;
  -webkit-animation: rotate 2s ease-in-out 0.4666666667s alternate infinite;
          animation: rotate 2s ease-in-out 0.4666666667s alternate infinite;
}

.rect-15 {
  z-index: 15;
  width: 60px;
  height: 60px;
  top: 170px;
  left: 170px;
  border-color: #bebebe;
  -webkit-animation: rotate 2s ease-in-out 0.5s alternate infinite;
          animation: rotate 2s ease-in-out 0.5s alternate infinite;
}

.rect-16 {
  z-index: 16;
  width: 50px;
  height: 50px;
  top: 175px;
  left: 175px;
  border-color: #c6c6c6;
  -webkit-animation: rotate 2s ease-in-out 0.5333333333s alternate infinite;
          animation: rotate 2s ease-in-out 0.5333333333s alternate infinite;
}

.rect-17 {
  z-index: 17;
  width: 40px;
  height: 40px;
  top: 180px;
  left: 180px;
  border-color: #cecece;
  -webkit-animation: rotate 2s ease-in-out 0.5666666667s alternate infinite;
          animation: rotate 2s ease-in-out 0.5666666667s alternate infinite;
}

.rect-18 {
  z-index: 18;
  width: 30px;
  height: 30px;
  top: 185px;
  left: 185px;
  border-color: #d6d6d6;
  -webkit-animation: rotate 2s ease-in-out 0.6s alternate infinite;
          animation: rotate 2s ease-in-out 0.6s alternate infinite;
}

.rect-19 {
  z-index: 19;
  width: 20px;
  height: 20px;
  top: 190px;
  left: 190px;
  border-color: #dedede;
  -webkit-animation: rotate 2s ease-in-out 0.6333333333s alternate infinite;
          animation: rotate 2s ease-in-out 0.6333333333s alternate infinite;
}

.rect-20 {
  z-index: 20;
  width: 10px;
  height: 10px;
  top: 195px;
  left: 195px;
  border-color: #e6e6e6;
  -webkit-animation: rotate 2s ease-in-out 0.6666666667s alternate infinite;
          animation: rotate 2s ease-in-out 0.6666666667s alternate infinite;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
            transform: rotate(0deg) translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: rotate(360deg) translate3d(0, 0, 0);
            transform: rotate(360deg) translate3d(0, 0, 0);
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
            transform: rotate(0deg) translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: rotate(360deg) translate3d(0, 0, 0);
            transform: rotate(360deg) translate3d(0, 0, 0);
  }
}