Elastic Bounce

A ball that bounces with a spring-like overshoot using a custom cubic-bezier easing.

Published July 6, 2026

Demo

Elastic
bounce

Spring
overshoot

Linear
(for reference)

HTML
				
				<div class="ball"></div>

CSS
				
				/* Classic elastic overshoot */
.ball-spring {
  animation: bounce-spring 1.2s
    cubic-bezier(0.68, -0.55, 0.265, 1.55)
    infinite alternate;
}

/* Squash-and-stretch bounce */
@keyframes bounce-elastic {
  30% { transform: translateY(-140px); }
  /* squash on impact */
  40% { transform: translateY(0) scaleX(1.3) scaleY(0.7); }
  60% { transform: translateY(-70px); }
}

@keyframes bounce-spring {
  from { transform: translateY(0); }
  to   { transform: translateY(-140px); }
}

			

How it works

cubic-bezier(0.68, -0.55, 0.265, 1.55) is the classic elastic easing — the negative Y₁ value (-0.55) makes the animation briefly go backwards before springing forward, and the Y₂ > 1 value (1.55) causes it to overshoot the target before settling. The realistic bounce uses @keyframes with scaleX and scaleY squash-and-stretch at the floor, a CSS trick from traditional animation principles.