I was playing around with creating a sonar pinger animation with pure CSS. It actually turned out to be much easier than I expected!

You can see it here: http://codepen.io/anon/pen/ytnHh

TL;DR Create a div (with 50% solid border-radius) for every circle you want to appear simultaneously in the animation. Then create keyframe animation than increases the width and height and translates it so the center stays stationary as the block grows.

Here is my CSS:

Here is the HTML:

I actually wrote this using SASS and SLIM. For the curious, here is the SLIM: