Bouncing Ball Made With CSS

Ever wanted to make a ball, or even your logo bounce on your webpage?

Look no further because this instructable should more than satisfy you; with just HTML and CSS, you can make magic

All you need:

-fresh air

-a text editor

-a browser

Create an HTML file named "bounce.html"

Enter the basic HTML5 syntax, then give your page a nice title with the title tag

Here we will also create a link to "bounce.css" which we will name of our stylesheet (css file) later in this instructable.

Done? Let's move....

We can't let our ball bounce around all on it's own, right?

Let's create a div which will serve as a container for our ball, the class of this very div element will be "container".

After that, it's goodbye to Step 3.

Remember the link we inserted in our HTML syntax in Step 2? We are going to create a stylesheet named "bounce.css'"(from our link tag in step 2).

Once that is done, we will add a few variables, which will help shorten our code when we use them

Immediately after, we will style the body of our page.

Next: Back to HTML

Don't worry, we won't dwell much on it this time.

We are only here to add two more accessories including our ball!

To start, we will insert an svg inside the first div(with class; "container")

The svg tag will have the class; "ball" , this element will be our ball.

After the svg, we will create a div with class;"shadow" to make our ball look a little more realistic with shadow effects.

And ...we'reee out like a light.

The first task in our comeback to CSS will positioning our container to be relative.

Once that has been settled, we will add some styles for appearance of our ball and it's shadow.

Notes:

-The border-radius is what makes our ball circular

-Background-size will be relevant if you use an image/ gradient not of color.

All elements need to have widths and heights and the variables we inserted earlier on will come in handy. Our job has been cut out, we assign those variables to width and height.

Notes:

-The width and height of the ball must be equal.

Now we will set the positions of the ball,it's shadows's,and we also set margins(in px, cm or %)

top positions a DOM from the top,left from the left and so forth.

In this step, we'll be dealing with stylesheet animations .

To get our desired result, we give the animation a name, set it's delay time, set it's speed and make sure it loops using only the CSS animation functions.

Notes

-cubic bezier measures the speed of the animation at four stages.

-infinite iteration-count makes the animation go on forever.

In this section we will add a little code to transform and translate the position of(bounce) the ball and it's shadow

Notes

-from indicates original position while

-to indicates new position.

I had no doubt you had it in you :-)