How to make smooth bounce animation using CSS ?

The smooth bounce animation can be done with the help of HTML and CSS. It will generate fun and desired outputs.

For this project, a simple div with class ball is needed in HTML page:

filter_none

edit
close

play_arrow

link
brightness_4
code

<div class="ball"></div>

chevron_right


We will switch to CSS for animation programming. Now, Flexbox is used to have the ball at the middle of the page and make the ball 70px by 70px in size. It can be taken in any size of the user’s choice as it determines the size of the ball.



filter_none

edit
close

play_arrow

link
brightness_4
code

body {
  display: flex;              
  justify-content: center;   
}
.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;         
  background-color: #FF5722;  
}

chevron_right


Here,
justify-content: center is used to center the ball horizontally.
border-radius : 50% turns the square into a circle.
background-color: #FF5722 turns the circle to orange colour. There are various code notations for colors to be remembered.

Keyframe creating: Keyframes in CSS animations gives complete control over the animation. Simple use of the keyword @keyframes followed by the name of the animation, i.e, smooth bounce ball:

filter_none

edit
close

play_arrow

link
brightness_4
code

@keyframes smoothbounceball{
    statements
}

chevron_right


Within the keyframe, use keywords from and to to make a start and end point for the animation.

filter_none

edit
close

play_arrow

link
brightness_4
code

@keyframes smoothbounceball{
    from {/*starting*/}
    to {/*ending*/}
}

chevron_right


To our understanding, we can add starting and ending values to the animation. To create a bouncing effect, we need to transform the location of the ball. transform allows to modify co-ordinates of a given element. Hence the final keyframe:

filter_none

edit
close

play_arrow

link
brightness_4
code

@keyframes smoothbounceball{
    from { transform: translate3d(0, 0, 0);}
    to { transform: translate3d(0, 200px, 0);}
}

chevron_right


Here, translate3d functions takes three inputs, the change in 3-dimensional axis (x, y, z). It will translate the ball in 3-Dimensional axes. If the ball wants to move up and down, the ball needs to translate along the y-axis.

Running the keyframe: Since the @keyframe has been created, now it needs to run. In the above mentioned code of .ball{ }, a following a line has to be added:

filter_none

edit
close

play_arrow

link
brightness_4
code

.ball{
    Given statements...
  
    animation: bounce 0.5s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

chevron_right


The understanding of the animation: The animation tells ball element to use the given keyframe rule bounce and sets the length of the animation of 0.5 seconds. Then at finishing, the animation direction alternates. Then runs the animation an infinite number of times.

But it does not like the ball bounces but moves back and forth, up and down.
Hence, it looks like:

That is because the timing of the animation is off. Animations are set to ease, by default. So, to look like the ball is bouncing, the animation needs to be slow at the start and speeding up in the middle and then finishing slowly.

Hence bezier curve is used to customize animation timings. Therefore the code:

filter_none

edit
close

play_arrow

link
brightness_4
code

.ball{
    Given statements..
  
    animation: bounce 0.5s cubic-bezier(0.5, 0.05, 1, 0.5);
}

chevron_right


After this, the ball shows the bouncing effect. Here is the final code:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            display: flex;
            justify-content: center;
        }
          
        .ball {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #FF5722;
            animation: bounce 0.5s;
            animation-direction: alternate;
            animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
            animation-iteration-count: infinite;
        }
          
        @keyframes bounce {
            from {
                transform: translate3d(0, 0, 0);
            }
            to {
                transform: translate3d(0, 200px, 0);
            }
        }
        /* Prefix Support */
          
        ball {
            -webkit-animation-name: bounce;
            -webkit-animation-duration: 0.5s;
            -webkit-animation-direction: alternate;
            -webkit-animation-timing-function: cubic-bezier(
            .5, 0.05, 1, .5);
            -webkit-animation-iteration-count: infinite;
        }
          
        @-webkit-keyframes bounce {
            from {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
            to {
                -webkit-transform: translate3d(0, 200px, 0);
                transform: translate3d(0, 200px, 0);
            }
        }
    </style>
</head>
  
<body>
    <div class="ball"></div>
</body>
  
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.