How can we create a bouncing ball without using any JavaScript?

Animating the UI is an effective way to draw the attention from users and make our apps more interesting. When I was working on a Silverlight to HTML5 project, I come across many animated user interface. Our roadmap is not to use jQuery dependent code unless we have to. From this project, I learnt many things on CSS animation and it is highly efficient and effective way of doing animation.
We do not clutter the JavaScript code.
We reduce the execution overhead and save CPU cycle.
Our code will stay current and relevant as new technologies come up.
We have no dependency on any other third party library as we use pure native features from what browsers support.
***No workaround or hacky stuff.
Here I want to share a sample code which is of a little something similar to how I did UI animation.
I make it bare minimum to make it more intuitive and easy to understand.
Just copy the sample html, save it and open it in a Chrome, Firefox, IE11 or Edge browsers.
You will see the ball bouncing inside its container - without any JavaScript required.

Source code

Code in Action