body {
  background: #FFFFFF;
  overflow: hidden;
}

div:nth-child(1) {
  left: -140px;
  z-index: -1;
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}

div:nth-child(1)::before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}

div:nth-child(1)::after {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}

div:nth-child(2) {
  left: 0px;
  z-index: -2;
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}

div:nth-child(2)::before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}

div:nth-child(2)::after {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}

div:nth-child(3) {
  left: 140px;
  z-index: -3;
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}

div:nth-child(3)::before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}

div:nth-child(3)::after {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}

div:nth-child(4) {
  left: 280px;
  z-index: -4;
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}

div:nth-child(4)::before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}

div:nth-child(4)::after {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}

div:nth-child(5) {
  left: 420px;
  z-index: -5;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}

div:nth-child(5)::before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}

div:nth-child(5)::after {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}

div:nth-child(6) {
  left: 560px;
  z-index: -6;
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}

div:nth-child(6)::before {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}

div:nth-child(6)::after {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}

div:nth-child(7) {
  left: 700px;
  z-index: -7;
  -webkit-animation-delay: -1.4s;
          animation-delay: -1.4s;
}

div:nth-child(7)::before {
  -webkit-animation-delay: -1.4s;
          animation-delay: -1.4s;
}

div:nth-child(7)::after {
  -webkit-animation-delay: -1.4s;
          animation-delay: -1.4s;
}

div:nth-child(8) {
  left: 840px;
  z-index: -8;
  -webkit-animation-delay: -1.6s;
          animation-delay: -1.6s;
}

div:nth-child(8)::before {
  -webkit-animation-delay: -1.6s;
          animation-delay: -1.6s;
}

div:nth-child(8)::after {
  -webkit-animation-delay: -1.6s;
          animation-delay: -1.6s;
}

div:nth-child(9) {
  left: 980px;
  z-index: -9;
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}

div:nth-child(9)::before {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}

div:nth-child(9)::after {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}

div:nth-child(10) {
  left: 1120px;
  z-index: -10;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}

div:nth-child(10)::before {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}

div:nth-child(10)::after {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}

div:nth-child(11) {
  left: 1260px;
  z-index: -11;
  -webkit-animation-delay: -2.2s;
          animation-delay: -2.2s;
}

div:nth-child(11)::before {
  -webkit-animation-delay: -2.2s;
          animation-delay: -2.2s;
}

div:nth-child(11)::after {
  -webkit-animation-delay: -2.2s;
          animation-delay: -2.2s;
}

div:nth-child(12) {
  left: 1400px;
  z-index: -12;
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
}

div:nth-child(12)::before {
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
}

div:nth-child(12)::after {
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
}

div {
  width: 100px;
  height: 100px;
  background: #4C4C4C;
  border: 10px solid #C0C0C0;
  -webkit-transform: skewX(45deg);
  position: absolute;
  left: 100px;
  top: 100px;
  -webkit-animation: growDiv 1s ease 0s infinite alternate;
          animation: growDiv 1s ease 0s infinite alternate;
}

div::after {
  width: 100px;
  height: 120px;
  background: #616161;
  position: absolute;
  content: '';
  left: -110px;
  top: 40px;
  -webkit-transform: skewY(-45deg);
  z-index: -1;
  -webkit-animation: growDivAfter 1s ease 0s infinite alternate;
          animation: growDivAfter 1s ease 0s infinite alternate;
}

div::before {
  width: 120px;
  height: 100px;
  background: #7F7F7F;
  position: absolute;
  content: '';
  left: -60px;
  top: 110px;
  -webkit-transform: skewX(-45deg);
  z-index: -1;
  -webkit-animation: growDivBefore 1s ease 0s infinite alternate;
          animation: growDivBefore 1s ease 0s infinite alternate;
}

@-webkit-keyframes growDiv {
  0% {
    top: 100px;
  }
  90% {
    top: 200px;
  }
  100% {
    top: 200px;
  }
}

@keyframes growDiv {
  0% {
    top: 100px;
  }
  90% {
    top: 200px;
  }
  100% {
    top: 200px;
  }
}
@-webkit-keyframes growDivAfter {
  0% {
    width: 100px;
    height: 120px;
    left: -110px;
    top: 40px;
  }
  90% {
    width: 0px;
    height: 120px;
    left: -10px;
    top: -10px;
  }
  100% {
    width: 0px;
    height: 120px;
    left: -10px;
    top: -10px;
  }
}
@keyframes growDivAfter {
  0% {
    width: 100px;
    height: 120px;
    left: -110px;
    top: 40px;
  }
  90% {
    width: 0px;
    height: 120px;
    left: -10px;
    top: -10px;
  }
  100% {
    width: 0px;
    height: 120px;
    left: -10px;
    top: -10px;
  }
}
@-webkit-keyframes growDivBefore {
  0% {    width: 120px;
    height: 400px;
    left: -60px;
    top: 410px;
  }
  90% {
    width: 120px;
    height: 0px;
    left: -10px;
    top: 110px;
  }
  100% {
    width: 120px;
    height: 0px;
    left: -10px;
    top: 110px;
  }
}
@keyframes growDivBefore {
  0% {    width: 120px;
    height: 400px;
    left: -60px;
    top: 410px;
  }
  90% {
    width: 120px;
    height: 0px;
    left: -10px;
    top: 110px;
  }
  100% {
    width: 120px;
    height: 0px;
    left: -10px;
    top: 110px;
  }
}