Problem Statement

• Animate a button to give it a bouncing effect when hovered over.
• Use a keyframe animation to simulate a bounce (moving up and then returning to its initial position).
• Set the animation properties including animation-name, animation-duration, and animation-timing-function.
• The bounce animation should only run while the button is hovered over.

Solution

Explanation:

• Button Structure:

  • A <button> element with the class .bounce-button is created to serve as the interactive element.

• Initial Styling:

  • The button is styled with a solid background color, white text, and rounded corners for a modern look.
  • A transition is set on the transform property in case of immediate small changes, even though the animation handles the major bounce effect.

• Hover State and Animation:

  • When the button is hovered (.bounce-button:hover), the animation property is activated.
  • The animation named bounce runs for 0.6 seconds using an "ease" timing function.

• Keyframes (Bounce Animation):

  • The @keyframes bounce rule defines:
    • 0%: The button starts at its original position (translateY(0)).
    • 50%: The button moves upward by 20px (translateY(-20px)), creating the bounce peak.
    • 100%: The button returns to its original position.

• Outcome:

  • Each time the user hovers over the button, it smoothly moves upward and then back to its starting position, giving the illusion of a bounce.

This solution fulfills the challenge requirements by using keyframe animations along with the necessary animation properties (name, duration, timing) to create an engaging, interactive bouncing effect on a button—all without JavaScript.