CSS3 Bouncing Ball

In this tutorial, we are going to create an awesome bouncing ball effect with help of pure CSS3 properties.

Must Read : Create Smooth image zooming with CSS transitions


HTML:

<div class="container">
	<div class="ball"></div>
	<div class="shadow"></div>
</div>

As you can see, we have three simple div elements. container is the main div which is wrapped around ball and shadow divs. 

CSS:

We are going to set height, width and margin to the container. This will help us to position the container div.

.container{
	width: 100px;
	height: 100px;
	margin: 0px auto;
}

Then, we are going to style the ball element,

.ball{
	position: absolute;
	width: 50px;
	height: 50px;
	background: #ad8766;
	margin: 0px auto;
	border-radius: 50%; 
	animation: bounce .5s infinite alternate;
}

We have given a height and width of 50px and border-radius of 50% to make it circular. Also, we are using animation property to apply a the bounce effect.

We are using following CSS properties to set styling to shadow div.

.shadow{
	position: relative;
	width: 50px;
	height: 25px;
	background: #ccc;
	top: 250px;
	border-radius: 50%;
	animation: shadow .5s infinite alternate;
}

We are going to set border-radius of 50% to make it circular and using animation property to apply shadow effect.

Animation:

Ball Animation:

@keyframes bounce {
	0%{
		margin-top: 200px;
		width: 50px;
		height: 50px;
	}
	20%{
		width: 40px;
		height: 60px;
	}
	40%{
		width: 40px;
		height: 60px;
	}
	60%{
		width: 45px;
		height: 55px;
	}
	80%{
		width: 50px;
		height: 50px;
	}
	100%{
		margin-top: 0px;
		width: 50px;
		height: 50px;
	}
}

Basically what we are doing here is we are starting with a margin-top of 200px at 0% to 0px at 100%. In the middle of animation we are changing the width and height of the ball to make it oval while falling down.

Shadow Animation:

@keyframes shadow {
	0%{
		transform: scale(0.5);
		opacity: 0.8;
	}
	100%{
		transform: scale(1);
		opacity: 0.2;
	}
}

To animate the shadow we are going to scale it to 0.5 and change its opacity to 0.8 at 0%. And At 100% we are going to scale it back to 1 and change its opacity to 0.2.

Leave a Comment.