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 :

[WPGP gif_id=”340″ width=”600″]

Link Font Awesome CSS

Add the follwoing code inside <head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Write code for heart icon

We will animate heart icon. Write the following simple HTML code
<i class="fa fa-heart fa-5x"></i>

black heart

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

Add color to icon

.fa{color:salmon;}

salmon heart

Define Keyframe Animation

@keyframes beat{
	50%{transform:scale(1.5)}  
}
Apply this animation to the icon
.fa{
	/*..*/
	animation:beat .35s infinite;
}
We have made the simple beating icon :

[WPGP gif_id=”348″ width=”600″]

Modify code for double beat

Wrap the icon with <div> and add class beating-icon to it.
<div class="beating-icon">
	<i class="fa fa-heart fa-5x"></i>
</div>
And modify the CSS code as below :
.beating-icon i{
	color:salmon;
	animation:beat .35s infinite;
}

@keyframes beat{
	50%{transform:scale(1.5)}  
}
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) :
.beating-icon{
	animation:beat .7s infinite;
	display:inline-block;
}
Ok, we have made the doubly beating icon :

[WPGP gif_id=”351″ width=”600″]

Centering inside the <body> ( Optional )

Modify the HTML :

<div class="beating-icon">
	<div>
		<i class="fa fa-heart fa-5x"></i>
	</div>
</div>
Modify the CSS :
.beating-icon{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

.beating-icon div{
	  animation:beat .35s infinite; 
}

.beating-icon div i{
	  color:salmon;  
	  animation:beat .7s infinite;
}

@keyframes beat{
	  50%{transform:scale(1.5)}  
}
Finally :

[WPGP gif_id=”340″ width=”600″]

Leave a Reply

Your email address will not be published. Required fields are marked *