//Forked from http://shelleylowe.com/css-animations/

body {
  background-color: #1d1e22;
}

@keyframes ball-bounce {
  0% { top: -50px; animation-timing-function: ease-in; }
  12% { top: -20px; animation-timing-function: ease-out; }
  18% { top: -38px; animation-timing-function: ease-in; }
  38% { top: 22px; animation-timing-function: ease-out; }
  43% { top: 2px; animation-timing-function: ease-in; }
  62% { top: 60px; animation-timing-function: ease-out; }
  68% { top: 42px; animation-timing-function: ease-in; }
  90% {top: 100px; animation-timing-function: ease-in-out; }
  100% {opacity: 0}
}
@keyframes platform-disappear-top {
  12% { width: 100px; left: 25%; }
  15% { width: 125px; left: 20%; }
  20%, 40% { width: 0px; left: 50%; }
  50%, 100% { width: 100px; left: 25%; }
}
@keyframes platform-disappear-middle {
  38% { width: 100px; left: 25%; }
  41% { width: 125px; left: 20%; }
  46%, 70% { width: 0px; left: 50%; }
  80%, 100% { width: 100px; left: 25%; }
}
@keyframes platform-disappear-bottom {
  62% { width: 100px; left: 25%; }
  65% { width: 125px; left: 20%; }
  70%, 90% { width: 0px; left: 50%; }
  100% { width: 100px; left: 25%; }
}
.platform-bounce {
  width: 200px;
  height: 220px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  text-align: center;
}
.ball {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background-color: #FFF;
  position: relative !important;
  left: 94px;
  -webkit-animation: ball-bounce 3s infinite;
  animation: ball-bounce 3s infinite;
}
.platform {
  width: 100px;
  height: 8px; 
  border-radius: 5px;
  background-color: #FFF;
  display: inline-block;
  margin-top: 20px;
  -webkit-animation: platform-disappear-middle 3s infinite;
  animation: platform-disappear-middle 3s infinite;
}
.platform::before {
  content: '';
  background-color: #FFF;
  width: 100px;
  height: 8px; 
  border-radius: 5px; 
  position: absolute;
  top: -10px;
  left: 25%;
  -webkit-animation: platform-disappear-top 3s infinite;
  animation: platform-disappear-top 3s infinite;
}
.platform::after {
  content: '';
  background-color: #FFF;
  width: 100px;
  height: 8px; 
  border-radius: 5px; 
  position: absolute;
  top: 70px;
  left: 25%;
  -webkit-animation: platform-disappear-bottom 3s infinite;
  animation: platform-disappear-bottom 3s infinite;
}