In this article we'll see how to create a mouse click animation using just a few lines of CSS and JS.
Just 734 bytes of code that you can copy on your website, no frameworks or libraries required.

The effect is applied to this page so you can play around with it.

You are free to copy, modify and use this code as you wish.

This is of course the most important part: we need to define an element that will be created when the mouse is clicked, and define keyframes for the animation.
In this example, I'm using an expanding circle with a fade-out and a line that start thick and ends thin.
Do not waste the user's time with long animations, keep it around 0.5 seconds.

Finally, we define a function that creates an element, and use it as an event listener. The element self-destructs when the animation ends. Here, I apply it to the entire document, but you can apply it only to specific elements such as links and checkboxes.

This code requires support for CSS animations (unprefixed) and the animationend event; therefore it is compatible with IE10+ and any recent version of other browsers.
Touchscreens are also supported, as the click event also includes tapping the screen.