How to make an animation of a bouncing ball using HTML and CSS

You know how every animator starts with a bouncing ball? Well, when I was learning HTML and CSS, I created a simple bouncing ball animation using Krita and my trusty Huion tablet. Then, I discovered that I could do the same thing using CSS, and I was hooked! So, let’s dive in and learn how to make it happen.

Languages:
HTML/CSS
You can find the tutorial and the code in the pinned comment.
Also, I'm going to pin my accounts.