Simple Bounce Effect With Pure CSS (Free Download)

Welcome to a tutorial on how to create a simple bounce effect with pure CSS. Once upon a time in the Stone Age of the Internet, we have to work with all kinds of third-party plugins to do simple animation. Fast-forward today, things are so easy with CSS animation.

To create a simple bounce effect with CSS, we can use a combination of keyframes and animations.

  1. Create the HTML element.
    • <div id="demo"></div>
    • #demo { width: 100px; height: 100px; background: red; }
  2. Define the bouncing keyframes, and attach it to the element.
    • @keyframes bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-50px); } }
    • #demo { animation: bounce 0.8s infinite alternate; }

That covers the basics, but read on for more examples!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes CSS Bounce Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

CSS BOUNCING BALL

All right, let us now get into an example of a bouncing ball in HTML and CSS.

 

STEP 1) STATIC RED BALL

bounce.html
<div class="ball"></div>
bounce.css
/* (A) STATIC BALL */
.ball {
  /* (A1) DIMENSIONS */
  width: 100px; height: 100px;
  border-radius: 50%;
 
  /* (A2) MORE TOP MARGIN FOR BOUNCE ANIMATION */
  margin: 80px auto 0 auto;
 
  /* (A3) COLOR */
  background: #f45342;
}

This should be pretty self-explanatory –

  • We use width: 100px and height: 100px to create a square, then border-radius: 50% to turn it into a circle.
  • Leave some margin space to the top for the bouncing animation – margin: 80px auto 0 auto.

 

 

STEP 2) SIMPLE BOUNCE ANIMATION

bounce.css
/* (B) SIMPLE BOUNCE */
@keyframes bounce { 
  0% { transform: translateY(0); }
  100% { transform: translateY(-50px); }
}
 
.bounce {
  animation: bounce 0.8s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

Yep, that is all the CSS we need to create a bouncing ball:

  • Start by creating the @keyframes bounce, we are basically just moving the ball up-and-down with translateY here.
  • Next, attach the @keyframes to the .ball CSS class with animation: bounce 0.8s.
  • It will be weird if the bounce animation only ran in one direction, the ball will move nicely upward, then abruptly fall back into the translateY(0) position. To “fix” this, we set animation-direction: alternate to run the animation in alternate directions.
  • Finally, loop the animation infinitely with animation-iteration-count: infinite.

 

 

STEP 3) ADDING “GRAVITY”

bounce.css
/* (C) ADDING "GRAVITY" */
@keyframes gbounce { 
  0% { transform: translateY(0); }
  30% { transform: translateY(-50px); }
  50% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

.gbounce {
  animation: gbounce 2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

The above simple linear bounce works, but this is a small addition for those who want more – Let us give it a little more “life-like” characteristic by adding “gravity” to the equation.

  • We now define more @keyframes to give the ball “less airtime”, a faster fall, and a short delay before “jumping”.
  • Going along with the updated @keyframes is animation-timing-function: ease – Play around with the various timing functions, and see which works best.
  • Take note – We no longer need animation-iteration-count: infinite since the @keyframes will pretty much loop itself.

 

STEP 4) SPRING EFFECT

bounce.css
/* (D) ADDING "SPRING EFFECT" */
@keyframes spring { 
  0% { transform: scale(1) translateY(0); }
  10% { transform: scale(1.2, 0.6); }
  30% { transform: scale(0.8, 1.1) translateY(-50px); }
  50% { transform: scale(1) translateY(0); }
  100% { transform: translateY(0); }
}
 
.spring{
  animation: spring 2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

Finally, this one is for the “perfectionists” – A liquid bounce with spring effect:

  • All we need to do is to add a couple more scale transformations.
  • Before the ball makes the jump, we will add a “spring compression” by scaling the horizontal to be longer, and the vertical to be shorter.
  • As the ball makes the jump, we will make it look taller by scaling the horizontal to be shorter, and the vertical to be longer.
  • Finally, as the ball drops, it reverts to the “normal proportions”.

 

 

USEFUL BITS & LINKS

That’s it for the bouncing CSS, and here are a few small extras that you may find to be useful.

 

EXTRA) STOP ON MOUSE HOVER

.spring:hover { animation: none; }

To stop the CSS animation, we simply set animation: none. We can combine this with the :hover CSS pseudo-class to stop the bounce effect on mouse hover, or even use Javascript to stop it programmatically.

 

EXTRA) BOUNCE ON IMAGES & BUTTONS

<input type="button" value="BUTTON!" class="spring"/>
<img src="ico-warn.png" class="spring"/>


Yes, the bounce effect can also be applied to other HTML elements such as images and buttons as well.

 

COMPATIBILITY CHECK

This example will work on most modern browsers – The required CSS3 properties are already well-supported at the time of writing.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

CSS Bounce Effect (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this short guide. I hope that it has helped you to create a better website, and if you have anything to share with this guide, please feel free to comment below. Happy coding and good luck!

5 thoughts on “Simple Bounce Effect With Pure CSS (Free Download)”

  1. It was all good, up until the horrible example of “Subscribe now”.
    If as a web developer you find yourself creating such a button, please stop and redirect your energy elsewhere.
    Subscriptions are a pure dark pattern.

    1. Wow. Much deep. Such reasoning. Very argument. Can you please share more reasons why a subtly animated bouncing button is bad? I am but a simple Earthling and don’t understand those cosmic bad dark energy stuff. So… In simple, proper, and pragmatic English, please?

      P.S. This guy is probably a master troll, but I figure this is too funny to ignore – So I approved. 😆

    2. https://code-boxx.com/faq/#nolike

      Interesting. We have yet another master who somehow understood the “dark side of the force” by “cosmic enlightenment”… But cannot give any sound reasoning or arguments.

      For the artsy-fartsy designers who may be ticked off in the future, here is a disclaimer – “This code ninja here is obviously not a designer and just gave a few possible usage scenarios.” Also, a reminder that personal opinions are accepted but they don’t benefit other readers much otherwise.

Leave a Comment

Your email address will not be published. Required fields are marked *