Circular Pulse

I made a demo on dabblet of this.

Here's the code:

HTML

<div class="pulse"></div>

CSS

/**
 * Circular Pulse
 */

body {
    background: url("http://dabblet.com/img/noise.png") repeat #eee;
    min-height: 100%;
}

.pulse {
    margin: 100px;
    width: 30px;
    height: 30px;
    border-radius: 100px;
    box-shadow: 0 0 0 2px #000;
    animation-direction: alternate;
    animation: thePulse infinite 2s ease-in-out;
}

@-keyframes thePulse {
    0% { box-shadow: 0 0 0 2px #000; }
    100% { box-shadow: 0 0 0 2px #000, 0 0 0 5px #fff, 0 0 0 8px rgba(255, 4, 80, 0.25), 0 0 0 12px #fff, 0 0 0 15px rgba(255, 4, 80, 0.35); }
}

@-moz-keyframes thePulse {
    0% { box-shadow: 0 0 0 2px #000; }
    100% { box-shadow: 0 0 0 2px #000, 0 0 0 5px #fff, 0 0 0 8px rgba(255, 4, 80, 0.25), 0 0 0 12px #fff, 0 0 0 15px rgba(255, 4, 80, 0.35); }

}

@-webkit-keyframes thePulse {
    0% { box-shadow: 0 0 0 2px #000; }
    100% { box-shadow: 0 0 0 2px #000, 0 0 0 5px #fff, 0 0 0 8px rgba(255, 4, 80, 0.25), 0 0 0 12px #fff, 0 0 0 15px rgba(255, 4, 80, 0.35); }

}