Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Bouncing Ball Animation

Solution: Bouncing Ball Animation

Let’s 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 ...