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>
|
1 |
<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
|
1 |
<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
|
1 |
.fa{color:salmon;} |
Define Keyframe Animation
|
1 2 3 |
@keyframes beat{ 50%{transform:scale(1.5)} } |
Apply this animation to the icon
|
1 2 3 4 |
.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.
|
1 2 3 |
<div class="beating-icon"> <i class="fa fa-heart fa-5x"></i> </div> |
And modify the CSS code as below :
|
1 2 3 4 5 6 7 8 |
.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) :
|
1 2 3 4 |
.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 :
|
1 2 3 4 5 |
<div class="beating-icon"> <div> <i class="fa fa-heart fa-5x"></i> </div> </div> |
Modify the CSS :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.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 :
