896+ Capstone Project is Available: Whatsapp: +91-7011258995, Email: sharecodepoint@gmail.com

Animated Bouncing Balls Using HTML and CSS3

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.



 Animated Bouncing Balls Using HTML and CSS3  Live Demo Animated Bouncing Balls Using HTML and CSS3

Sharecodepoint

Sharecodepoint is the junction where every essential thing is shared for college students in the well-defined packets of codes. We are focused on providing you the best material package like Question papers, MCQ'S, and one NIGHT STUDY MATERIAL. facebook twitter youtube instagram

6 Comments

  1. 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.

    ReplyDelete
  2. Amazing :) I love this effect so much :) Maybe, I’ll make some cool effects like this for my future website template :)

    ReplyDelete
  3. Superb effect :) code is perfectly written.

    ReplyDelete
Previous Post Next Post

Contact Form