Grokking CSS for Web Development
Vote

0% completed

​

Animate a Button with a Bouncing Effect

A ball thrown upward moves fast as it leaves the ground, slows down near the top, and speeds up again as it falls. A bouncing button looks right when it moves the same way. This challenge builds that bounce with keyframes, chooses a timing function for each half of the movement, and fixes a hover problem that a moving button creates.

The requirements

  • Make a button bounce when the user hovers over it.
  • Use a keyframe animation that moves the button up and back to its starting position.
  • Set the animation name, duration, and timing function.

.....

.....

.....

Like the course? Get enrolled and start learning!

Reading Progress

0%

Vote for new content