Part 03: Bouncing Ball (Animation) - Mastering CSS Animations

In this video, we'll create a bouncing ball animation in CSS and talk about timing functions.

Previous video: Create the structure and style of a bouncing ball loader:

To follow along, you can either:

1) fork the lesson template on Codepen

2) or download the lesson template on Github

---

---

Full Course:
03: Bouncing Ball (Animation)

[avinestephen]

very useful resource thank you brother

[freelancingartisan]

Our World Wide Web is a greater medium, thanks to the talented folks at CodyHouse. 👍

[barkodr]

:) Could you go over some of the transforms uses in animation and effects? Could you also go over the limitations of CSS animations with glitching and random durations with the animations...

[drewhagni]

I haven't tested this out, but rather than using the "--ease-out" variable on the 50% keyframe and an "--ease-in" on the "animation" parameter of the ball element, could you instead just use an "--ease-in-out" variable on the "animation" parameter of the ball element and not have to worry about animation timing on the keyframes?

Not sure if the animation timing would be close or completely off; just curious if that's a viable option though since it would be slightly simpler to maintain.

Thanks for these videos by the way. I've learned a lot from your code over the years. :)