Bola hilang

by MAz Mawan

HTML

<div id="ballWrapper">
   <div id="ball">
   </div>
        <div id="ballShadow">

          . . .

        </div>
</div>

CSS

/* Animations */
@-webkit-keyframes jump {
 0% {top: 0;
  -webkit-animation-timing-function: ease-in;
 }
 40% {}
 50% {top: 140px;
  height: 140px;
  -webkit-animation-timing-function: ease-out;
 }
 55% {top: 160px; height: 120px; border-radius: 70px / 60px;
  -webkit-animation-timing-function: ease-in;}
 65% {top: 120px; height: 140px; border-radius: 70px;
  -webkit-animation-timing-function: ease-out;}
 95% {
  top: 0; 
  -webkit-animation-timing-function: ease-in;
 }
 100% {top: 0;
  -webkit-animation-timing-function: ease-in;
 }
}
/* Isi dengan value yang sama */
@-moz-keyframes jump {...}
@-o-keyframes jump {...}
@-ms-keyframes jump {...}
@keyframes jump {...}

@-webkit-keyframes shrink {
 0% {
  bottom: 0;
  margin-left: -30px;
  width: 60px;
  height: 75px;
  background: rgba(20, 20, 20, .1);
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
  border-radius: 30px / 40px;
  -webkit-animation-timing-function: ease-in;
 }
 50% {
  bottom: 30px;
  margin-left: -10px;
  width: 20px;
  height: 5px;
  background: rgba(20, 20, 20, .3);
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
  border-radius: 20px / 20px;
  -webkit-animation-timing-function: ease-out;
 }
 100% {
  bottom: 0;
  margin-left: -30px;
  width: 60px;
  height: 75px;
  background: rgba(20, 20, 20, .1);
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
  border-radius: 30px / 40px;
  -webkit-animation-timing-function: ease-in;
 }
}
/* Isi dengan value yang sama */
@-moz-keyframes shrink {...}
@-o-keyframes shrink {...}
@-ms-keyframes shrink {...}
@keyframes shrink {...}

#ballWrapper {
 width: 140px;
 height: 300px;
 position: fixed;
 left: 50%;
 top: 35%;
 margin-left: -70px;
 z-index: 100;
 transform: scale(1);
 transition: all 5s linear 0s;
 cursor: pointer;
}

#ballWrapper:active {
 transform: scale(0);
 cursor: pointer;
}

#ball {
 width: 140px;
 height: 140px;
 border-radius: 70px;
 background: rgb(187,187,187);

#ball::after {
 content: "";
 width: 80px;
 height: 40px;
 position: absolute;
...