Search⌘ K
Home
Courses
Grokking CSS Design Patterns to Ace Interviews

Bouncing Ball Animation

Explore how to build a smooth and realistic bouncing ball animation using CSS keyframes, absolute positioning, and cubic-bezier timing. Understand how to style elements and define multiple animation waypoints for dynamic visual effects, enhancing your ability to create engaging UI animations purely with CSS.

We'll cover the following...

Problem description

Given an HTML page containing a <div class="bounce-container"><div class="ball"></div></div> structure, write CSS to:

  • Style .bounce-container with a fixed height and relative positioning.

  • Style .ball as a circle (e.g., 40px×40px), absolutely positioned horizontally centered at the top. ...