Bouncing Balls with CSS3 Animation is possible?
CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components. 1). A style describing the CSS animation and a set of keyframes. Keyframes indicate the start and end states of the animation’s style. 2) Possible intermediate way points along the way.
Previously animations were possible only with the use of javascript or jquery. But now the CSS3 animation properties enables us to do animations easily. It enables us to add different effects to our websites with CSS3.
Here I am going to give an example of bouncing balls with css3 animation. and we’ll use css3 transition, ie, bouncing balls using css3 animation.
Bouncing Balls using CSS3 Animation
We have to add the following HTML for creating bouncing balls animation with CSS3 properties.
HTML for the Bouncing Balls
<div id="ball-one" class="bounce"></div> <div id="ball-two" class="bounce1"></div> <div id="ball-three" class="bounce2"></div> <div id="ball-four" class="bounce3"></div> <div id="ball-five" class="bounce4"></div>
To create balls or rounded shape, we will use div. We’ll set the border radius to 50% and width and heigh as similar value. For eg. width: 80px and height: 80px. Then give border-radius: 50%.
CSS required for the Bouncing Balls
/*Common styles for balls*/
#ball-one, #ball-two, #ball-three, #ball-four, #ball-five {
box-shadow:inset -10px -30px rgba(0,0,0,.08);
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100%;
}
#ball-one{
width:100px;
height:100px;
background-color:#0bdce9;
margin:0 400px;
margin-top:255px;
}
#ball-two{
width:80px;
height:80px;
background-color:#0afb3d;
margin-top:-80px;
}
#ball-three{
width:90px;
height:90px;
background-color:#ff00f6;
margin-left:300px;
margin-top:-90px
}
#ball-four{
width:60px;
height:60px;
background-color:#cc0000;
margin-left:180px;
margin-top:-90px
}
#ball-five{
width:120px;
height:120px;
background-color:#ffcc00;
margin-left:650px;
margin-top:-90px
}
.bounce{-webkit-animation:bounce 8s ease-in-out infinite}
@-webkit-keyframes bounce {
0% {
-webkit-transform:translateY(-200px);
}
5% {
-webkit-transform:translateY(0px);
}
15% {
-webkit-transform:translateY(-170px);
}
30% {
-webkit-transform:translateY(0px);
}
40% {
-webkit-transform:translateY(-140px);
}
50% {
-webkit-transform:translateY(0);
}
60% {
-webkit-transform:translateY(-110px);
}
70% {
-webkit-transform:translateY(0%);
}
80% {
-webkit-transform:translateY(-50px);
}
90% {
-webkit-transform:translateY(0);
}
95% {
-webkit-transform:translateY(-10px);
}
100% {
-webkit-transform:translateY(0);
}
}
/*Animation for second circle*/
.bounce1{-webkit-animation:bounce 5s ease-in-out infinite}
@-webkit-keyframes bounce1 {
0% {
-webkit-transform:translateY(-200px);
}
5% {
-webkit-transform:translateY(0px);
}
15% {
-webkit-transform:translateY(-170px);
}
30% {
-webkit-transform:translateY(0px);
}
40% {
-webkit-transform:translateY(-140px);
}
50% {
-webkit-transform:translateY(0);
}
60% {
-webkit-transform:translateY(-110px);
}
70% {
-webkit-transform:translateY(0%);
}
80% {
-webkit-transform:translateY(-50px);
}
90% {
-webkit-transform:translateY(0);
}
95% {
-webkit-transform:translateY(-10px);
}
100% {
-webkit-transform:translateY(0);
}
}
/*Animation for third circle*/
.bounce2{-webkit-animation:bounce 3s ease-in-out infinite}
@-webkit-keyframes bounce2 {
0% {
-webkit-transform:translateY(-200px);
}
5% {
-webkit-transform:translateY(0px);
}
15% {
-webkit-transform:translateY(-170px);
}
30% {
-webkit-transform:translateY(0px);
}
40% {
-webkit-transform:translateY(-140px);
}
50% {
-webkit-transform:translateY(0);
}
60% {
-webkit-transform:translateY(-110px);
}
70% {
-webkit-transform:translateY(0%);
}
80% {
-webkit-transform:translateY(-50px);
}
90% {
-webkit-transform:translateY(0);
}
95% {
-webkit-transform:translateY(-10px);
}
100% {
-webkit-transform:translateY(0);
}
}
/*Animation for fourth Circle*/
.bounce3{-webkit-animation:bounce 3s ease-in-out infinite}
@-webkit-keyframes bounce3 {
0% {
-webkit-transform:translateY(-200px);
}
5% {
-webkit-transform:translateY(0px);
}
15% {
-webkit-transform:translateY(-170px);
}
30% {
-webkit-transform:translateY(0px);
}
40% {
-webkit-transform:translateY(-140px);
}
50% {
-webkit-transform:translateY(0);
}
60% {
-webkit-transform:translateY(-110px);
}
70% {
-webkit-transform:translateY(0%);
}
80% {
-webkit-transform:translateY(-50px);
}
90% {
-webkit-transform:translateY(0);
}
95% {
-webkit-transform:translateY(-10px);
}
100% {
-webkit-transform:translateY(0);
}
}
/*Animation for fifth circle*/
.bounce4{-webkit-animation:bounce 3s ease-in-out infinite}
@-webkit-keyframes bounce4 {
0% {
-webkit-transform:translateY(-200px);
}
5% {
-webkit-transform:translateY(0px);
}
15% {
-webkit-transform:translateY(-170px);
}
30% {
-webkit-transform:translateY(0px);
}
40% {
-webkit-transform:translateY(-140px);
}
50% {
-webkit-transform:translateY(0);
}
60% {
-webkit-transform:translateY(-110px);
}
70% {
-webkit-transform:translateY(0%);
}
80% {
-webkit-transform:translateY(-50px);
}
90% {
-webkit-transform:translateY(0);
}
95% {
-webkit-transform:translateY(-10px);
}
100% {
-webkit-transform:translateY(0);
}
}
CSS for Bouncing Balls explained
The starting ball position is 0 and we are animating ball from Y0 to Y200 position. We need to control the ball animation speed as per the position of ball. First step is that, the ball drop from 200 position and it will reach to 0 position. Second step is that, the ball start form 0 position to 170 position. Third step is ball drop from 170 to 0 position. The same way we have to manage the ball position as par the ball animation speed.
Browser Support for Bouncing Balls using CSS3 Animation
This animation of Bouncing Balls using CSS3 will work in Chrome and Safari.
Demo for Bouncing Balls using CSS3 Animation
