<div class="wrap">
   <div class="ball"></div>
 </div>
body {
  display: flex;
  min-height: 100vh;
}

.wrap {
  height: 430px;
  width: 82px;
  margin: auto;
  position: relative;
  background: #81cfa2;
  border-bottom: 20px solid yellowgreen;
}

.ball {
  position: absolute;
  top: 0px;
  left: 1px;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background: #e24343 linear-gradient(105deg, #ecf56a, transparent);
  animation: bounce 3s cubic-bezier(.1, .25, 1, .25) infinite forwards;
 }

@keyframes bounce {
  60%,80%,to{
     transform: translateY(350px);
     animation-timing-function: ease;
   }
   70% {transform: translateY(250px);}
   90% {transform: translateY(300px);}
 }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.