.outer {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 400px;
  width: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.top, .bottom {
  position: absolute;
  height: 200px;
  width: 100%;
  top: 0;
  left: 0;
  background: #29434E;
}

.bottom {
  top: 50%;
  background: #00B8D4;
}

.middle {
  position: absolute;
  z-index: 2;
  width: 420px;
  height: 400px;
  left: -10px;
  top: 0;
  transform-style: preserve-3d;
  animation: elastic 5s ease-in-out infinite;
}
.middle .grey, .middle .blue {
  position: absolute;
  width: 420px;
  height: 400px;
  background: #29434E;
  backface-visibility: hidden;
  border-radius: 50%;
  z-index: 2;
  transform: rotateX(0);
}
.middle .blue {
  background: #00B8D4;
  z-index: 1;
  transform: rotateX(180deg);
}

@keyframes elastic {
  0% {
    transform: rotateX(90deg);
  }
  15% {
    transform: rotateX(150deg);
  }
  20% {
    transform: rotateX(50deg);
  }
  25% {
    transform: rotateX(120deg);
  }
  30% {
    transform: rotateX(70deg);
  }
  35% {
    transform: rotateX(100deg);
  }
  40% {
    transform: rotateX(83deg);
  }
  45% {
    transform: rotateX(93deg);
  }
  50% {
    transform: rotateX(90deg);
  }
  65% {
    transform: rotateX(30deg);
  }
  70% {
    transform: rotateX(130deg);
  }
  75% {
    transform: rotateX(60deg);
  }
  80% {
    transform: rotateX(110deg);
  }
  85% {
    transform: rotateX(80deg);
  }
  90% {
    transform: rotateX(97deg);
  }
  95% {
    transform: rotateX(87deg);
  }
  100% {
    transform: rotateX(90deg);
  }
}