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.

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

 

 

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.

 

 

 

STEP 1) STATIC RED BALL

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

/* (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

/* (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”

/* (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

/* (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”.

 

 

 

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

• CSS Animation – CanIUse
• CSS Transform – CanIUse

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

 

LINKS & REFERENCES

• CSS Animation – MDN
• CSS Transform – MDN

 

INFOGRAPHIC CHEAT SHEET