Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Bouncing Ball Animation

Problem: Bouncing Ball Animation

Try to animate a bouncing ball that falls and rebounds with diminishing height using only CSS keyframes.

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. ...