DEV Community

Cover image for Bouncing Ball Animation using <li> tag
Rohit Sharma
Rohit Sharma

Posted on

3

Bouncing Ball Animation using <li> tag

Hello, I'm new to this platform and this is my first post.
In this post I'll be sharing how we can create BOUNCING BALL animation using li tag.

• First of all create index.html
HTML
That's it for html.

• Now move to CSS
CSS

Now add keyframes for animation
CSS
*I used rem values so speed of bouncing vary as I change the window size. So feel free to change it. *

• Final Result

YouTube:

IMPORTANT:-
As I mentioned that this my first post . So, please guide me how to write post on this platform and what mistakes I made in this post.
I hope you enjoyed it ❤️.

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more