Just playing around to see if I can recreate the Material Design ripple as a page transition in CSS. Click any link in this block of text to load another set of text. The links don't go anywhere yet. They are just hooks to allow you to click somewhere
The style and animation is entirely CSS so it is smooth. JavaScript is used to add classes at the right time. It also pauses to wait for the content to be replaced, and calculates where to centre the hole. There are two stages to the animation. When a link is clicked the border-width grows very large.
That's enough reading on this slide. Click a link to load the second slide