How to Create Ball Bounce Animation Effect with HTML, CSS3?

Hey, today you will get to know the code to bounce the ball infinite times.

The bouncing ball code mainly comprises of three steps. Firstly, the ball element is specified to use the keyframe rule (rule specifies the animation) and animation (lets an element gradually change from one style to another) length time is set. At the completion of the animation, the direction reverses and therefore, runs the animation for infinite times.

To start with create a layout by specifying classes container, ball and shadow.

CSS Structure

The container class sets the position of the layout. Then, ball class is applied with the animation bounce, and for a duration of 1 second after which it keeps on bouncing due to the iteration value infinite. Animation-fill mode is used to specify the style for the element when the animation is not running and in this case, the value is none.

To use CSS animation, keyframes are required for the animation. This allows the animation to gradually change from the current style to the new style at certain times. The style change is specified by keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

.container{
position:relative;
min-height:350px;
width:100%;
}
.ball {
    -webkit-animation-name: bounceball;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: none;

-moz-animation-name: bounceball;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: none;

animation-name: bounceball;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 0;
    animation-play-state: running;
    animation-fill-mode: none;

background: red none repeat scroll 0 0;
    border-radius: 50px;
    bottom: 0;
    height: 50px;
    left: 45%;
    position: absolute;
    width: 50px;
  overflow:hidden;
}

@keyframes bounceball {

from {
        bottom: 150px;
        height:43px;
    }

to {
        bottom: 250px;
    }

}
.ball:after{
  position:absolute;
  content:"";
  height:100%;
  width:100%;
  background-color:transparent;
  border-radius:50%;
  border-right:3px solid grey;
  left:-35%;
  animation:bounceball;
}
.shadow {
    -webkit-animation-name: bounceshaddow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: none;

-moz-animation-name: bounceshaddow;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: none;

animation-name: bounceshaddow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 0;
    animation-play-state: running;
    animation-fill-mode: none;

background: #757272 none repeat scroll 0 0;
    border-radius: 50px;
    bottom: 0;
    height: 50px;
    left: 45%;
    position: absolute;
    width: 50px;
}

@keyframes bounceshaddow {

from {
        bottom: 110px;
        height:43px;
    }

to {
        bottom: 50px ;
      width:25px;
      height:25px;
      background-color:#8d8e90;
      left:46%;
    }

}

Now everything is completed, here is how you will see the bouncing ball animation.

CSS3 Bounce Animation Effects

Leave a Reply Cancel reply