<div class="box jump"></div>
html,body {
  display: grid;
  justify-items: center;
  align-content: center;
  
  width: 100%;
  height: 100%;
  background-color: #eaeaea;
}

.box {
  width: 100px;
  height: 100px;
  background-color: indianred;
}

.jump {
  animation-name: jump;
  animation-duration: 2s;
}

@keyframes jump {
  10%, 25% { 
    transform: scale(1.3, 0.7); 
  }
  
  50% { 
    transform: scale(0.5, 2) translate(0, -100px); 
  }  
  
  60% { 
    transform: scale(1, 1) translate(0, 0);   
  } 
  
  75% { 
    transform: scale(1.3, 0.7) translate(0, 0); 
  }
  
  85% { 
    transform: scale(1, 1) translate(0, 0);   
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.