DEV Community

Cover image for how to make moving ball animation in css
Amr  khaled kilany
Amr khaled kilany

Posted on

how to make moving ball animation in css

how to make moving ball animation in css?

in my library butterfly css you can use many animations
like from

ball-move-1 to ball-move-5

example:

<div ball-move-1 h-500 w-full gradient-1></div>

Enter fullscreen mode Exit fullscreen mode

preview:

cdn:https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@main/attributes.css
docs:https://butterfly-css.netlify.app/docs#ball-animations

Top comments (1)

Collapse
 
uianimation profile image
UI Animation

As a Rive Animator, I love how CSS animations like these give quick results for simple effects. But if you ever want next-level, interactive, physics-driven ball animations that respond to user input or data in real-time, that’s where Rive shines.

We can create smooth, resolution-independent animations with precise control over timing, easing, and interactivity, perfect for games, web apps, or playful UI elements.

If you need custom Rive ball animations that go beyond CSS loops, you can hire me at riveanimator.com , happy to bring your ideas to life!