Doubly Beating Icon

zFunx CSS Tricks December 30, 2017 | 0

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

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>

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

Add color to icon

.fa{color:salmon;}

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 :

GIF

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 :

GIF

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 :

GIF

Code is also available at https://codepen.io/zFunx/pen/mpmBWx. Useful links :