A Pure CSS Bouncing Ball

Published January 29, 2013 by saurav.roy.

css-bouncing-ball-2

Today we’re going to create a ball that bounces infinitely around its container.

I’ll admit it: the idea for this tutorial was based on two things: first, those corny bouncing ball/logo/whatever screensaver animations that are so popular on modern televisions, DVD players, or just about anything else that has — or outputs to — a screen. Second, a brief but passionate love affair I had with Jezzball in 2001.

So if bouncing balls are so old-school, what’s the big whoop? We’ll do ours entirely with CSS. Read On…