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.

• Define a @keyframes bounce animation with multiple waypoints that:

  • Moves the ball from translateY(0) to translateY(160px) at 50%.

  • Bounces back to translateY(0) with diminishing peaks (e.g., 70% at 100px, 90% at 160px).

• Apply the bounce animation to .ball with a duration of 2s, timing function cubic-bezier(0.28, 0.84, 0.42, 1) and infinite iteration.

Goal

Write CSS rules to animate the .ball element so it drops and bounces realistically within the container.

Constraints

• Use only CSS (no JavaScript).

• .bounce-container height should be 200px; width should be 100%; position should be relative.

• .ball size should be 40px×40px; background-color should be #ff4757; border-radius should be 50%; position should be absolute; left should be calc(50% - 20px).

• Keyframes bounce stops:

  • 0% { transform: translateY(0); }

  • 50% { transform: translateY(160px); }

  • 70% { transform: translateY(100px); }

  • 90% { transform: translateY(160px); }

  • 100% { transform: translateY(0); }

• Animation name should be bounce.

• Animation duration should be 2s.

• Animation timing function should be cubic-bezier(0.28, 0.84, 0.42, 1).

• Animation iteration count should be infinite.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.