Animation CSS Series: Bouncy Ball Part 1

Photo by Christopher Gower on Unsplash

After taking a bit of a break from self-learning programming (I had started my first software engineering job and was learning a lot), I decided it was time to take learning new skills into my own hands. The idea is that every two months I focus on learning something new. Something that I have been wanting to learn for a while now is css animation. So this will be my very first blog in my series on animation in css and maybe some js.

Although I want to get into some more complex and relevant animation that I can implement into websites. I wanted to start with something simple, a bouncy ball. This blog will be broken into 3 parts starting simple and adding more complexity as we go. The first blog will be making a bouncing ball bounce using HTML and CSS

Let’s start with creating some basic HTML and CSS to create the ball. I decided to do this project in CodePen.IO as it is simple to set up, if you are going to follow along, I suggest using an online IED like CodePen or Repl.it.

The HTML is as follows :

HTML Setup

The CSS is very basic and will be like this:

CSS Setup

The setup doesn’t really include anything too complicated but if you don’t know flex yet, all this does is center the content.

Bouncing ball without animation

You should end up with something like this:

I know that it doesn’t look too impressive but in a subsequent blog we will be improving the look of it but in the meantime lets focus on animating it

Let’s get animating!

When we want to create an animation we use something called a KeyFrame and is set up similar to a media query @Keyframes name{ //CSS goes here }.

We are going to start off very basically with just using from and to inside our keyframe and we want to change the position the element is from the top.

Keyframe

Because we are using ‘top’ we are going to need to set the position of the ball to relative in order for it affect the element.

Lastly we are going to have to call the keyframe in the css and this is how:

Animating the Keyframe

We use animation and call the keyframe name and how long the keyframe should animate for. We currently have animation: bounce 0.5s (or 500ms).

Animation-direction refers to if the animation should go forward, backwards, or back and forth. So imagine if you have an item and it goes in a straight line, animation direction will refer to if it goes forward then starts again at the beginning, backwards and starts again at the end or if it starts at the beginning and goes forward then back. For the bouncing ball we want it to look seamless so we will use alternative.

Finally animation-iteration-count refers to how many times the keyframe should loop for. We have set it to infinite but you can also set it to a specific number like 3 times.

Hopefully now you should have a basic bouncing ball.

https://codepen.io/amyfranz/full/abBzOdYFinal Code

Look out for the next lesson, part 2, where we will be improving on this, to make it look more realistic.

Final Result

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store