Bouncing Ball
No library Intermediate
A squash-and-stretch ball with a synced shadow — multi-stop keyframes fake physical bounce physics. Pure CSS, no dependencies.
A squash-and-stretch ball with a synced shadow — multi-stop keyframes fake physical bounce physics. Pure CSS, no dependencies.
Goal: Create a "Bouncing Ball" loader animation.
Visual behavior: A 26px circle (the ball) above an oval shadow. The ball bounces with squash-and-stretch physics: it compresses horizontally and stretches vertically on the way up, then squashes wide on impact, with a small secondary bounce. The shadow beneath shrinks and fades when the ball is high, expands and darkens on impact.
Technique: Two elements stacked vertically via flex-column. Ball: keyframes animate translateY, scaleX, scaleY through multiple stops to fake physical bounce (up, squash on landing, small rebound, settle). Shadow: a flat oval (border-radius:50%) that mirrors the ball timing — scaleX shrinks as ball rises. Both share the same ~0.75s duration. Ball uses a radial-gradient for a 3D sphere look.
Accessibility: aria-label on the wrapper. Animations disabled under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.