Tutorial: Make a Bouncing Ball Entirely with CSS

Learn CSS Animations & Keyframes with this fun tutorial

What we’ll be making

Here’s a codepen with the final code and a demo of what we’ll be building:

Project Setup

For this project we’ll need a simple div with the class ball:

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

We’ll use Flexbox to center the ball in the middle of the page, and we’ll make the ball 100px by 100px in size. Finally, we’ll set it’s color to orange:

body {
  display: flex;              /* Use Flexbox                    */
  justify-content: center;    /* Center Horizontally            */
}
.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;         /* Turns a square into a circle   */
  background-color: #FF5722;  /* Sets color to Orange           */
}

Creating our Keyframe

Keyframes are used in CSS animations to give us complete control over the animation. The layout for creating a Keyframe is pretty straight forward. We use the keyword @keyframes followed by the name of the animation:

@keyframes nameOfAnimation {
  /* do stuff */
}

In this project, we’ll call our keyframe bounce. Within our Keyframe, we use the keywords from and to to specify a starting and ending point for our animation:

@keyframes bounce {
  from { /* start */ }
  to   { /* end   */ }
}

Awesome. As our last step, we can add in our starting and ending values. To create the bounce effect, we’ll simply be transforming the location of our ball. transform allows us to modify the coordinates of a given element. Here’s what the final keyframe looks like:

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

We use transform to translate the ball along a 3 dimensional axis. The translate3D function takes three inputs, the change in (x, y, z). Since we want our ball to bounce up and down, we only need to translate along the y axis. Thus, our ending y value becomes 200px.

Run The Keyframe

Now that our @keyframe has been created, it’s time to run it! Move back into the .ball {} css and add the following line code:

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

This code does three things:

• Tells the ball element to use our keyframe rule bounce. It also sets the length of the animation to .5 seconds.
• At completion, the animation direction alternates (reverses).
• Runs the animation an infinite number of times.

Awesome, here’s what we have so far. It’s close, but not quite ready:

It doesn’t really look like a bouncing ball. That’s because the timing of our animation is off. By default, animations are set to ease. This means the animation starts slowly, speeds up in the middle, then finishes slowly. Unfortunately, this is not ideal for a bouncing ball. Luckily, we can customize this timing using Math!

Withing going into too many of the nitty gritty details, You can use a bezier curve to specify custom animation timings. Here’s what the additional code looks like:

.ball {
  /* ... */
  
  animation: bounce 0.5s cubic-bezier(.5,0.05,1,.5);
}

You can use websites like this one to time animations and find the right curve for the occasion. This numbers create a curve that is (slow, slow, slow, FAST) — which is how we’re able to create a bouncing effect.

Here’s our final code (including webkit prefixing for ultimate browser support)

Where can I learn more?

Css is amazingly powerful. If this interests you, check out: Master CSS — Learn CSS3, CSS4, Flexbox, Animations, Grids, Frameworks, and More!!

Closing Notes

Thanks for reading! I publish 4 articles on web development each week. Please consider entering your email here if you’d like to be added to my once-weekly email list, or follow me on Twitter.

If you want to improve your CSS Skills, check out Master CSS — Learn CSS3, CSS4, Flexbox, Animations, Grids, Frameworks, and More!

If this post was helpful, please click the clap 👏button below a few times to show your support! ⬇⬇