Blip

gistfile1.sass

.location .blip {
  position: relative;
  display: inline-block;
  height: 30px;
  width: 30px;
  left: -10px;
}
.location .blip .blip-base {
  position: absolute;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: color(brand);
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -5px;
}
.location .blip .blip-pulse {
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: color(graydark);
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px;
  -webkit-animation-name: "blip";
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  z-index: -10;


}

.location p {
  position: relative;
  display: inline-block;
  top: -10px;
  left: -10px;
  margin: 0;
  padding: 0;
}

@-webkit-keyframes "blip" {
  0% {
    -webkit-transform: scale(0.1);
    opacity: 0;
  }

  1% {
    -webkit-transform: scale(0.1);
    opacity: .6;
  }

  60% {
    opacity: 0;
    -webkit-transform: scale(1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1);
  }
}

gistfile2.html

<section class="location">
              <div class="blip">
                <div class="blip-base"></div>
                <div class="blip-pulse"></div>
              </div>
              <p>Lorem ipsum</p>
</section>