Buntu, takda jalan keluar

Gambaran satu kebuntuan. Definisi buntu. → dbp.gov.my

Demo

HTML view

<div class="labu">
<div class="bola"></div>
</div>
<style>
.labu {
  background: linear-gradient(#cfe2f3 10%, #fff 20%, #fafafa 35%, #eee 65%, #ddd 80%, #ccc 90%);
  height: 600px;
  max-width: 344px;
  margin: auto;
  border: 2px dotted #cfe2f3;  
  display: flex;    
}
.bola {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(140deg, #ffffff, #bbbbbb);
  animation: gerak 2s;
  animation-direction: normal;
  animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  animation-iteration-count: infinite;
}
@keyframes gerak {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(264px, 100px, 0); }
  30% { transform: translate3d(0, 200px, 0); }
  40% { transform: translate3d(264px, 300px, 0); }
  50% { transform: translate3d(0, 400px, 0); }
  60% { transform: translate3d(264px, 500px, 0); }
  70% { transform: translate3d(0, 520px, 0); }
  80% { transform: translate3d(200px, 0, 0); }
  90% { transform: translate3d(264px, 520px, 0); }
  100% { transform: translate3d(80px, 0, 0); }
}
  .bola {
  -webkit-animation: gerak 2s;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes gerak {
  0% { -webkit-transform: translate3d(0, 0, 0); }
  20% { -webkit-transform: translate3d(264px, 100px, 0); }
  30% { -webkit-transform: translate3d(0, 200px, 0); }
  40% { -webkit-transform: translate3d(264px, 300px, 0); }
  50% { -webkit-transform: translate3d(0, 400px, 0); }
  60% { -webkit-transform: translate3d(264px, 500px, 0); }
  70% { -webkit-transform: translate3d(0, 520px, 0); }
  80% { -webkit-transform: translate3d(200px, 0, 0); }
  90% { -webkit-transform: translate3d(264px, 520px, 0); }
  100% { -webkit-transform: translate3d(80px, 0, 0); }
}
</style>