
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 :
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 :
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 :
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 :
Code is also available at https://codepen.io/zFunx/pen/mpmBWx. Useful links :