Bola memantul

Salah satu cara untuk membuat animasi bola memantul guna CSS tulen ialah dengan menambah kod seperti animation-timing-function: agar pergerakan bola memantul kelihatan realistik. Bagaimanapun, sudah pastilah dalam dunia nyata bola tak akan memantul secara infinite.

Demo

HTML view

<div class="labu">
<div class="bola"></div>
</div>
<style>
  .labu {
  background: linear-gradient(166deg, #f3f3f3 10%, #cfe2f3 20%, #f3f3f3 35%, #f3f3f3 65%, #cfe2f3 80%, #f3f3f3 90%);
  height: 410px;
  display: flex;
  justify-content: center;
}
.bola {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(140deg, #ffffff, #bbbbbb);
  animation: bounce 0.5s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  animation-iteration-count: infinite;
}
@keyframes bounce {
  from { transform: translate3d(0, 0, 0);     }
  to   { transform: translate3d(0, 260px, 0); }
}
.bola {
  -webkit-animation-name: bounce;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
  from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to   { -webkit-transform: translate3d(0, 260px, 0); transform: translate3d(0, 260px, 0); }
}
</style>

Kod asal dipetik dari codeburst.io