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