← All elements
<div class="stage"><div class="ball"></div><div class="shadow"></div></div>About this animation
A ball that drops and bounces with squash and stretch, using a custom cubic-bezier and a matching shadow.
How it works
The ball moves down with translateY, and at the bottom of the keyframe it stretches wide and short using scale(1.25, 0.7), then returns, which imitates squash and stretch. The transform-origin is the bottom of the ball so it flattens on the ground. A matching shadow below grows and darkens as the ball lands.
Ways to customise it
- Change the ball gradient colours.
- Edit the distance of 120px and 130px for a different drop height.
- Adjust the cubic-bezier to change the bounce feel.
Good to know
It is purely visual and stops under prefers-reduced-motion. Animating transforms and opacity only keeps it smooth.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.