Ever imagine that you can now easily create a bouncing ball using CSS3 only? No javascript or image is required to do this. Thanks to the powerful attribute of CSS3 animation.

To create a ball rounded effect, we will use css3 border radius to do so. By setting the value to 50%, it will create a rounded div ball. Please see the following css3 style code.

<style>
	.bounce-ball{
		border-radius: 50%;
		width:80px;
		height:80px;
		background: #a4b357;
		background: -moz-linear-gradient(top, #a4b357 0%, #75890c 100%);
		background: -webkit-linear-gradient(top, #a4b357 0%,#75890c 100%);
		background: linear-gradient(to bottom, #a4b357 0%,#75890c 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 );
		color:#fff;
		line-height: 80px;
		text-align: center;
		position:absolute;
		right:10px;
		bottom:10px;
		
		-webkit-animation-name: bounceballAnimation;
		-webkit-animation-duration: 1s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-direction: alternate;
		-webkit-animation-delay: 0;
		-webkit-animation-timing-function: ease-out;
		
		animation-name: bounceballAnimation;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-delay: 0;
		
		timing-function: ease-out;
		
		animation-play-state: running;
		animation-fill-mode: none;
	}
	
	.bounce-ball:hover {
		-webkit-animation-play-state: paused;
		animation-play-state: paused;
    }

    @-webkit-keyframes bounceballAnimation {
		from { bottom: 0; height: 65px; }
		10%  { bottom: 0; height: 80px; }
		to   { bottom: 10%; }
    }
    @keyframes bounceballAnimation {
		from { bottom: 0; height: 65px; }
		10%  { bottom: 0; height: 80px; }
		to   { bottom: 10%; }
    }
</style>

Demo of Bouncing Ball

You can see the bouncing ball on the right bottom corner of the comment form.