Select Page

CSS Animation: Bouncing Ball

What Have I Been Reading?

Subscribe via Email

If you enjoy my ramblings, then you can sign up using your email address and get notified whenever I post!

Join 372 other subscribers

by | Nov 20, 2018

Hello everyone! I have been plodding along the passed few weeks learning, but I realised I hadn’t MADE anything. I have been working my way through The Odin Project and cleaning up my maths skills (yikes) over on Khan Academy: both incredible free resources. However, today I decided to refresh my memory of using @keyframes in CSS to create a fun little bouncing balls animation.

Using codepen, I created my HTML file using four < div > tags that were to make up my four ball animations. Nothing too exciting, I gave them the id=”ball1″ id=”ball2″ id=”ball3″ id=”ball4″. I gave each ball a separate “id” because I wanted to have different colours for each, and different timings on the animation so they wouldn’t all bounce at the same time. However, some things remained the same for all four such as I wanted them to be in the centre of the page, so I gave them a class=”ball” and wrapped them in another < div > tag with the class=”container”. Wrapping them in a container < div > allowed me to use flexbox to line them in one row vs. each ball being on it’s own line. Giving them a class allowed my code to be DRY (Do Not Repeat Yourself). If I had typed out the CSS for each ball, instead of using a class to eliminate repeating myself, every ball CSS would have to look like this:

that’s a LOT of code for four balls vs.

Much less repeating, and all of the information in the previous picture that we removed, is just placed inside the .ball { }

The “animation-name” you can see in this code, is what we use to create our animation keyframe. A keyframe looks like this : @keyframes animation-name. Then you use percentages to tell the animation what it will do at each point of the animation. So 0% would be the start of your animation and 100% would be the end. There are different types of CSS animation, for a bounce effect I wanted my ball to go down the y axis (vertical) and stay at the same place on the x axis (horizontal). The translate animation effect syntax is like this: transform: translate(x-coordinate,y-coordinate). So in the following code, the ball drops to 300px, comes back up to 100px, back down to 300px, and back to the original point of 0px.

If I left it at this the ball wouldn’t make that “bounce” I was looking for, it would just go up and down the y axis and look awkward/jerky movement. To make your animation appear more seamless, you can use something called animation-timing-function. Their are a few standard timings such as “ease-in” which the animation speeds up towards the end, “ease-out” animation slows at the end. However, for more freedom I decided to use the “cubic-bezier” function. This allows me to completely control each point of the animation speed curve. If you want to read a little more check out W3Schools  or freecodecamp. I experimented with the numbers until I was happy with the effect, another great resource for this is cubic-bezier.com, finalising on animation-timing-function:cubic-bezier(0.5, 0.5, 0.5, 0.5); which I placed within the .ball class so the effect would occur for each ball.

 

This would leave us with an animation of all balls bouncing at the same time. Finally, I added in “animation-delay” and set each to fall after each other, giving the effect that they are bouncing at different times.

 

See the Pen Bouncing Ball by Emma Mckellar (@em_mckellar) on CodePen.