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

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

.bottom {
  top: 50%;
  background: #37D493;
}

.ellipse {
  position: absolute;
  width: inherit;
  height: inherit;
  top: 0;
  left: 0;
  z-index: 2;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: elastic 5s ease-in-out infinite;
          animation: elastic 5s ease-in-out infinite;
}

.ellipse .grey, .ellipse .green {
  position: absolute;
  width: inherit;
  height: inherit;
  top: 0;
  left: 0;
  background: #444;
  border-radius: 50%;
  z-index: 2;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
}

.ellipse .green {
  background: #37D493;
  z-index: 1;
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

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

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