OneTaskBy Tim King · Updated
CSS Bounce Animation
Bouncing Ball Keyframes With Squash and Stretch on Landing
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the CSS Bounce Animation works
This CSS bounce animation generator drops a ball, squashes it as it hits the floor and springs it back up, the classic first exercise in animation. Set the ball size, bounce height, colour and speed, then copy the HTML and CSS.
A bounce works as a playful loader, a scroll-down hint or an icon that says "look here".
How the CSS bounce animation works
The ball moves between the top and the floor with easing curves that mimic gravity: it slows near
the top and speeds up as it falls. The keyframes use cubic-bezier timing so the ball hangs in the
air for a moment and hits the ground fast, rather than moving at a steady pace.
Squash and stretch
With squash on, the ball flattens and widens as it lands, then returns to round as it leaves the floor. A soft shadow on the floor shrinks as the ball rises, which helps the eye read the height.
FAQ
How do I bounce an icon instead of a ball?
Replace the ball element with your icon and keep the same class. The keyframes only change transform, so they work on any element, though squash looks best on rounded shapes.
Why does the bounce look floaty?
A long bounce time with a low height looks slow and weightless. Real objects fall faster from higher, so increase the height or shorten the time until the landing feels solid.
Does the bouncing ball stop for reduced motion?
Yes. The copied CSS includes a prefers-reduced-motion rule that stops the bounce and leaves the ball resting on the floor for visitors who ask for less motion.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Cubic Bezier
Shape a CSS easing curve and watch it animate.
Keyframe Animator
Build and preview a CSS @keyframes animation from three stops.
CSS Shake Animation
Shake or wiggle a button on hover or on a loop.
Loading Spinner
Design a CSS loading spinner and copy the code.
Gooey Effect
Liquid metaball blobs that merge and split, with an SVG filter.