Doubly Beating Icon

We will combine two scale transformation animations (one for the parent element and one for its child) to make the beats. It will look like the following :
GIF beating heart

Link Font Awesome CSS

Add the follwoing code inside <head>

Write code for heart icon

We will animate heart icon. Write the following simple HTML code

black heart

fa-5x is used to make the icon large, Learn more about Font Awesome Icons .

Add color to icon

salmon heart

Define Keyframe Animation

Apply this animation to the icon

We have made the simple beating icon :
GIF salmon simple beating heart

Modify code for double beat

Wrap the icon with <div> and add class beating-icon to it.

And modify the CSS code as below :

Above code will give the same result as the previous one. Now add that same animation to the <div> with animation duration twice that of that icon and make it inline-block ( by default it is a block element) :

Ok, we have made the doubly beating icon :
GIF salmon beating heart

Centering inside the <body> ( Optional )

Modify the HTML :

Modify the CSS :

Finally :
GIF beating heart