In this tutorial, we'll create the animated bouncing balls using only CSS3 transition , animations and show effects. Today, we will start by creating a very cool and realistic ball with CSS3 properties and add a CSS3 animations for giving bouncing and jumping effects to the ball.
CSS3 animation make it possible to animate transitions from one CSS3 style configuration to another. Previously it was possible only with the use of javascript or jquery for animations but now the CSS3 animation properties enables us to do animations easily. Don't write the big code for small animation just write the only one word "animation".
Today, I am going to give an example of bouncing and Jumping balls using CSS3 animations and transitions effects.
HTML CODE
Let's start with some very basic html. We have here 4 simple DIV elements . "class="main" " is the main DIV which controls the balls. This Div will determine the balls margin from top of the screen. First div is used for ball 1 , Second div used for ball 2 and third div used for ball 3.
<html> <head> <title>Animated Bouncing Ball's Using HTML and CSS3 </title> <link href="balls.css" rel="stylesheet" type="text/css"> <body> <div class="main"> <div class="ball1"> </div> <div class="ball2"> </div> <div class="ball3"> </div> </div> </body> </html>
CSS CODE
I'll start by adding the animation property to our ball "animation: animation:ball1 3s infinite ".
animation:ball1 3s infinite;All I did was to define the animation name (ball1 , ball2 or ball3 ), the animation's duration (3 second ) and how many times the animation will happen - in our case we use ( infinite ) which means that it will run forever.
Animation itself:
So, basically what I’m doing here is to play with the ‘top’ position property of the ball.
<html> <head> <title>Animated Bouncing Ball's Using HTML and CSS3 </title> <link href="balls.css" rel="stylesheet" type="text/css"> <body> <div class="main"> <div class="ball1"> </div> <div class="ball2"> </div> <div class="ball3"> </div> </div> </body> </html>
MAIN CSS CODE
We are giving the balls equal width and height and a value of 100% to border-radius property.So, it will be a ball and not an oval shape. All balls transition delay times are equal.
.main{ margin-top:100px;}
This CSS for Ball 1
.ball1{ float:left; width:100px; height:100px; background-color:#999999; border-radius:100%; transition:all 0.5s ease-in-out; -webkite-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; animation:ball1 3s infinite; -webkit-animation:ball1 3s infinite; -moz-animation:ball1 3s infinite; border:5px solid #222; } @keyframes ball1{ 20%{ background-color:#FF66CC; transition:all 0.5s ease-in-out; } 40%{ background-color:#66CC33; margin-left:800px; margin-top:100px; width:150px; height:150px; transition:all 0.5s ease-in-out; } 60%{ background-color:#CC33FF; margin-left:500px; margin-top:300px; width:150px; height:150px; transition:all 0.5s ease-in-out; } 80%{ background-color:#FFFF00; margin-left:300px; margin-top:100px; width:100px; height:100px; transition:all 0.5s ease-in-out; } 95%{ width:200px; height:200px; background-color:#FF9933; transition:all 0.5s ease-in-out; } }This CSS for Ball 2
/* This CSS for Ball 2 */ .ball2{ float:left; width:100px; height:100px; margin-top:100px; background-color:#66CCCC; border-radius:100%; transition:all 10s ease-in-out; -webkite-transition:all 10s ease-in-out; -moz-transition:all 10s ease-in-out; animation:ball2 2s infinite; -webkit-animation:ball2 2s infinite; -moz-animation:ball2 2s infinite; border:5px solid #222; } @keyframes ball2{ 20%{ background-color:#FFFF66; margin-top:200px; transition:all 0.5s ease-in-out; } 40%{ background-color:#CC66FF; margin-top:-50px; width:150px; height:150px; transition:all 0.5s ease-in-out; } 60%{ background-color:#FF3366; margin-top:200px; transition:all 0.5s ease-in-out; } 80%{ background-color:#FF9966; margin-top:-100px; width:100px; height:100px; transition:all 0.5s ease-in-out; } 95%{ width:150px; height:150px; margin-top:250px; background-color:#000000; transition:all 0.5s ease-in-out; } }This CSS for Ball 3
/* This CSS for Ball 3 */ .ball3{ float:left; width:100px; height:100px; margin-top:100px; background-color:#6666CC; border-radius:100%; transition:all 10s ease-in-out; -webkite-transition:all 10s ease-in-out; -moz-transition:all 10s ease-in-out; animation:ball2 2s infinite; -webkit-animation:ball3 2s infinite; -moz-animation:ball3 2s infinite; border:5px solid #222; } @keyframes ball3{ 25%{ background-color:#FF6633; margin-top:50px; transition:all 0.5s ease-in-out; } 40%{ background-color:#0066FF; margin-top:300px; width:150px; height:150px; transition:all 0.5s ease-in-out; } 60%{ background-color:#333333; margin-top:-200px; transition:all 0.5s ease-in-out; } 80%{ background-color:#663333; margin-top:100px; width:100px; height:100px; transition:all 0.5s ease-in-out; } 95%{ width:200px; height:200px; margin-top:300px; transition:all 0.5s ease-in-out; } }
Finally Animated Bouncing and Jumping Balls Done !
Now, you can create your own animation using CSS3 properties without writing any javascript and jquey code.
Thanks for posting this informative tutorial, I have recently been reading a number of blog posts about css3 animations, and the effects that can be created. The animation you have created strongly resembles the flash animations of a few years ago.
ReplyDeleteAmazing :) I love this effect so much :) Maybe, I’ll make some cool effects like this for my future website template :)
ReplyDeleteSuperb effect :) code is perfectly written.
ReplyDeleteAwesome Effect
ReplyDeletewow superb bro
ReplyDeleteAwesome effect
ReplyDelete