<p>".fa-beat" class:</p>
<p class="heart">
  <i class="fa fa-heart fa-4x fa-beat"></i>
</p>

<p>the name ".fa-pulse" was already taken by this:</p>
<p>
  <i class="fa fa-spinner fa-2x fa-pulse"></i>
</p>


.fa-beat {
  animation:fa-beat 5s ease infinite;
}
@keyframes fa-beat {
  0% {
    transform:scale(1);
  }
  5% {
    transform:scale(1.25);
  }
  20% {
    transform:scale(1);
  }
  30% {
    transform:scale(1);
  }
  35% {
    transform:scale(1.25);
  }
  50% {
    transform:scale(1);
  }
  55% {
    transform:scale(1.25);
  }
  70% {
    transform:scale(1);
  }
}






body {
  text-align:center;
  background:#111;
  color:#aaa;
  font:1em sans-serif;
}


.heart {
  color:red;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.