On my company's website, I've slowly been introducing subtle CSS3 animations over the past few months. One of the requests was for a "wave" animation for a background image. After a few false starts, our designer found the following codepen.

The hack is simple and effective; the original author relied on background images. His trick was overlaying portions of the original image in divs that contained pieces of the original image with random heights. Once the divs were overlaid, he used a very simple animation to alter the heights of the divs with randomly applied intervals using a Scss for loop. The downside? It used a background-position: fixed, meaning if you scrolled, the effect would break and it wasn't responsive. Still, it was rather genius in its simplicity, so I give hats off to Art Carvajal Impressed with the effect, I decided to fork it and make it responsive, and not break upon viewport scrolling.

Below is the end result, complete with simple Scss Vars to make hacking this into your own project even easier. It's only roughly 50 lines of Scss, and exceptionally performant as it looks great phones or desktops

See the Pen Moving Water (responsive Hack) by Greg Gant (@fuzzywalrus) on CodePen.