<div class="circle"></div>
body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle{
  background: red;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 50%, 100% {transform: translateY(0);}
    40% {transform: translateY(-120px);}
    60% {transform: translateY(-15px);}
} 
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.