Today i am going to show you about Bouncing Ball Animation using CSS3 transform and animation properties, we can do it in many ways as depends on the programmers. it is just simple trick behind this concept, let us see how we do this.

HTML
take three div's as par you need, we will change the div style to Boll and give it them to unique class and id names
<div id="boll" class="bounce"></div> <div id="boll1" class="bounce1"></div> <div id="boll2" class="bounce2"></div>
CSS
now apply 100% border-radius to each div and assign width,height and arrange them to different positions, now the ball design complete, it's time to animate the balls, take once class name bounce and apply -webkit-animation property and use @-webkit-keyframes property to arrange the keyframes to bounce class
Trick:
the starting ball position is 0 we are animating ball Y0 to Y200 position here we need to control the ball animation speed as par the position of ball
first step the ball drop from 200 position and it will reach to 0 position
second step the ball start form 0 position to 170 position
third step the ball drop from 170 to 0 position
like these we need to manage the ball position as par the ball animation speed
<style> #boll{ width:100px; height:100px; background-color:#F30; margin:0 auto; margin-top:255px; box-shadow:inset -10px -30px rgba(0,0,0,.08); -moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100%; } .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); } } /**/ #boll1{ width:80px; height:80px; background-color:#C3F; margin-top:-80px; box-shadow:inset -10px -30px rgba(0,0,0,.08); -moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100%; } .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); } } /**/ #boll2{ width:90px; height:90px; background-color:#090; box-shadow:inset -10px -30px rgba(0,0,0,.08); -moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100%; margin-left:300px; margin-top:-90px } .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); } } </style>
Live Demo Download Script
nice one
ReplyDeletedemo not working dear
ReplyDeleteit works only in chrome because he used only web kit transitions
ReplyDelete