<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>
<p>… obviously …</p>
<p>
Read more on
<a href="https://codeblock.at/en/2016/05/fontawesome-beating-heart-animation/" rel="noopener">codeblock.at</a>.
</p>
a{
color:#09f;
}
/* FONT AWESOME GENERIC BEAT */
.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;
}
View Compiled
This Pen doesn't use any external JavaScript resources.