* {
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: border-box;
}

.wrapper {
  display: table;
  margin: 50px auto;
  position: relative;
}

html, body {
  min-height: 100%;
}

body {
  background-image: radial-gradient(#960000 0%, #780000 100%);
}

.box {
  width: 25px;
  height: 25px;
  float: left;
  background: white;
  margin: 0 2px 2px 0;
  opacity: 0;
  border-radius: 2px;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.clear {
  clear: left;
}

.white {
  background: none !important;
}

.box:not(.white) {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-animation: animation 4s infinite;
          animation: animation 4s infinite;
}

.box:not(.white):hover {
  -webkit-transform: scale(1.1, 1.1);
          transform: scale(1.1, 1.1);
  background: #be0000;
}

@-webkit-keyframes animation {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, -300px);
            transform: translate(0, -300px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  70% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, 300px);
            transform: translate(0, 300px);
  }
}

@keyframes animation {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, -300px);
            transform: translate(0, -300px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  70% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, 300px);
            transform: translate(0, 300px);
  }
}
.delay-1 {
  -webkit-animation-delay: .5s !important;
          animation-delay: .5s !important;
}

.delay-2 {
  -webkit-animation-delay: .6s !important;
          animation-delay: .6s !important;
}

.delay-3 {
  -webkit-animation-delay: .7s !important;
          animation-delay: .7s !important;
}

.delay-4 {
  -webkit-animation-delay: .8s !important;
          animation-delay: .8s !important;
}

.delay-5 {
  -webkit-animation-delay: .9s !important;
          animation-delay: .9s !important;
}

.delay-6 {
  -webkit-animation-delay: 1s !important;
          animation-delay: 1s !important;
}

.delay-7 {
  -webkit-animation-delay: 1.1s !important;
          animation-delay: 1.1s !important;
}

.delay-8 {
  -webkit-animation-delay: 1.2s !important;
          animation-delay: 1.2s !important;
}

.delay-9 {
  -webkit-animation-delay: 1.3s !important;
          animation-delay: 1.3s !important;
}

.delay-10 {
  -webkit-animation-delay: 1.4s !important;
          animation-delay: 1.4s !important;
}