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)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay