Simple HTML5 CSS3 drop and ripple animation

I am doing a project for a customer and this involves creating an animation of a droplet falling and creating a ripple effect. I thought I will detail the journey of creating the animation here with sample codes.