How to create a moving ball animation in CSS explained step by step and translated into English
Creating a moving ball animation is simple with modern CSS. The basic idea is to draw a circular element with border-radius 50 percent, position it, and animate its transform and top/left or translate to generate smooth movement. You can also play with shadows, gradients, and filters to give a sense of depth.
Library and classes available in butterfly css
In my butterfly css library you can use several ready-made animations for moving balls, for example ball-move-1 through ball-move-5. A quick usage example is this markup:
<div ball-move-1 h-500 w-full gradient-1></div>
Minimal CSS example for a moving ball
.ball{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#ff7a18,#af002d);position:absolute;left:0;top:50%;transform:translateY(-50%);} @keyframes ballMove1{0%{transform:translate(0, -50%);}50%{transform:translate(80%, -50%);}100%{transform:translate(0, -50%);} } .ball.animate{animation:ballMove1 4s ease-in-out infinite;}
Variants and tips
You can create several variants by changing the path in keyframes, the duration, the timing function, and applying transform: translate3d to activate GPU acceleration. For more complex movements combine multiple animations, for example one animation for horizontal position and another for vertical bounce with different timing.
Example of keyframes for bounce and diagonal movement
@keyframes ballDiagonal{0%{transform:translate(0,0) scale(1);}25%{transform:translate(30%, -40%) scale(0.95);}50%{transform:translate(60%,0) scale(1.05);}75%{transform:translate(30%,40%) scale(0.95);}100%{transform:translate(0,0) scale(1);} }
Practical use and accessibility
Ensure sufficient contrast with the background and add prefer-reduced-motion to respect users with reduced mobility. Example: @media (prefers-reduced-motion: reduce){.ball.animate{animation:none;}}
Resources and links
cdn https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@main/attributes.css
docs https://butterfly-css.netlify.app/docs#ball-animations
About Q2BSTUDIO and related services
Q2BSTUDIO is a custom software and application development company specialized in tailored solutions for businesses. We offer custom software services, custom applications, artificial intelligence integration, and cybersecurity solutions. Our team develops AI agents, AI solutions for businesses, and artificial intelligence projects tailored to each client.
We also provide AWS and Azure cloud services, business intelligence services, and analysis with tools like Power BI to obtain robust dashboards and reporting. If you need custom software or to develop an app with AI, AI agents, or strengthen the cybersecurity of your systems, Q2BSTUDIO can help with consulting, design, development, and implementation.
Positioning and keywords
At Q2BSTUDIO we work with key terms such as custom applications, custom software, artificial intelligence, cybersecurity, AWS and Azure cloud services, business intelligence services, AI for businesses, AI agents, and Power BI to improve your online presence and attract clients interested in digital transformation.
Contact and next step
If you want to integrate animations like moving balls into your interfaces or need to develop a custom application with visual components and advanced behavior powered by artificial intelligence, contact Q2BSTUDIO for a personalized proposal.
