Published on: 13 July, 2016

How to create bouncing ball using CSS3

Posted by andy | 793 views 1 likes 1 favourites 0 comments
Tumblr Digg Google Plus

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.

Hi!!
Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 24 March, 2016
You probably never thought about creating a heart shape completely using CSS3. Furthermore, you can include an animation to show the heart is actually beating. This is can be easily done with CSS3 animation. No flash or images are required.
Published on: 16 December, 2015
Creating a mobile menu button is really simple using CSS3. You may find others still using an image to create those 3 horizontal lines. With the introduction of :after and :before css3 attributes, this menu can be easily done by specifying the position content of the object and adding a content attribute.
Related Tutorials
Published on: 28 June, 2014
Learn how to use media queries in CSS3. Media queries are simple conditions used to targetting different devices for tables, phones or desktop computers. As each device may have different view size, media queries become so handy to use to display the content dimension correctly.
Published on: 28 June, 2014
Learn how to use advanced selectors in CSS3. By using the built in pseudo-class, performing a selector in CSS3 is so much easy.
Published on: 14 May, 2014
Learn how to use multiple-column property in CSS3. To create multiple columns in CSS3 is now so handy, you just need to include a css built-in keyword column-count to do the job for you. No more table layout required.
Published on: 13 May, 2014
Learn how to use box-sizing property in CSS3. As you know many browsers treat margin and padding differently. When you combine with width or height of an element box, you find out that the final dimension is completely different when you view with different browser. Well, this now can be easily taken care by using the new CSS box-sizing property.
Published on: 09 May, 2014
Learn how to use opacity property in CSS3. So what is actually opacity? CSS3 Opacity defines a transparency level of an element. The property value of opacity is range from 0 to 1.