Making bubbling heart animation using LESS CSS. LESS is a CSS preprocessor. Search more about it.
Creating hearts
Link Font Awesome CSS. Add this code inside head :
|
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
Add four hearts as code shown below :
|
1 2 3 4 5 6 |
<div class="bubbling-heart"> <div><i class="fa fa-heart fa-5x"></i></div> <div><i class="fa fa-heart fa-5x"></i></div> <div><i class="fa fa-heart fa-5x"></i></div> <div><i class="fa fa-heart fa-5x"></i></div> </div> |
Add colors :
|
1 2 3 4 5 |
body{ background: deepPink; color: pink; text-shadow: 0 0 40px pink; } |
Positioning hearts
Position hearts at bottom center as we will animate them from bottom to top :
|
1 2 3 4 5 6 7 8 9 10 |
.bubbling-heart-animation(){ .bubbling-heart div{ position:fixed; top:50%; left:50%; transform:translate(-50%,25vh); } } .bubbling-heart-animation(); |
Adding Up-Down Animation
Add the following keyframe animation :
|
1 2 3 4 5 6 7 8 9 10 |
.bubbling-heart-animation(){ .bubbling-heart div{ /*..*/ animation:bubbleUp 2s infinite; } @keyframes bubbleUp{ 100%{transform:translate(-50%,-25vh);} } } |
Create a variable which will control up-down animation duration:
|
1 2 3 4 5 6 7 8 9 10 |
.bubbling-heart-animation(@bubbling-duration){//note this .bubbling-heart div{ /*..*/ animation:bubbleUp @bubbling-duration*1s infinite;//note this } /*..*/ } .bubbling-heart-animation(2);//note this |
Create one more variable where you will define number of hearts :
|
1 |
@noOfHearts:4;//Write at top |
Add delays to animations :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.bubbling-heart div{ /*..*/ .animation-delays(@i:2) when (@i <= @noOfHearts){ &:nth-child(@{i}){ animation-delay:(@i - 1)*@bubbling-duration*0.25s; } .animation-delays(@i + 1); } .animation-delays; } |
Add fading effect :
|
1 2 3 4 5 6 7 8 9 10 11 |
.bubbling-heart-animation(@bubbling-duration){ .bubbling-heart div{ opacity:0; /*..*/ } @keyframes bubbleUp{ 50%{opacity:1} 100%{transform:translate(-50%,-25vh);} } } |
Add scaling animation :
|
1 2 3 4 5 6 7 8 9 10 11 |
.bubbling-heart-animation(@bubbling-duration){ .bubbling-heart div{ transform: translate(-50%, 25vh) scale(0); /*..*/ } @keyframes bubbleUp{ /*..*/ 100%{transform:translate(-50%,-25vh) scale(2);} } } |
Adding left-right animation
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.bubbling-heart-animation(@bubbling-duration){ .bubbling-heart div{ /*..*/ .fa{ transform:translateX(12.5vw); animation:oscillate 4s ease-in-out infinite; } .animation-delays(@i:2) when (@i <= @noOfHearts){ /*..*/ } /*..*/ } @keyframes bubbleUp{ /*..*/ } @keyframes oscillate{ 50%{transform:translateX(-12.5vw);} } } |
Create a variable which will control left-right animation duration:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.bubbling-heart-animation(@bubbling-duration,@oscillation-duration){//note this .bubbling-heart div{ /*..*/ .fa{ /*..*/ animation:oscillate @oscillation-duration*1s ease-in-out infinite;//note this } /*..*/ } .bubbling-heart-animation(2,4);//note this |
Add rotation animation :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.bubbling-heart-animation(@bubbling-duration,@oscillation-duration){ .bubbling-heart div{ /*..*/ .fa{ transform:translateX(12.5vw) rotate(25deg);//note this /*..*/ } /*..*/ } /*..*/ @keyframes oscillate{ 50%{transform:translateX(-12.5vw) rotate(-25deg);}//note this } } |
Add delays to left-right animations :
|
1 2 3 4 5 6 7 |
&:nth-child(@{i}){ animation-delay:(@i - 1)*@bubbling-duration*0.25s; .fa{ animation-delay:(@i - 1)*@oscillation-duration*0.25s;//note this } } |
Whole code :
|
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
|
1 2 3 4 5 6 |
<div class="bubbling-heart"> <div><i class="fa fa-heart fa-5x"></i></div> <div><i class="fa fa-heart fa-5x"></i></div> <div><i class="fa fa-heart fa-5x"></i></div> <div><i class="fa fa-heart fa-5x"></i></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
/*written in LESS CSS*/ @noOfHearts:4; body{ background: deepPink; color: pink; text-shadow: 0 0 40px pink; } .bubbling-heart-animation(@bubbling-duration,@oscillation-duration){ .bubbling-heart div{ position:fixed; top:50%; left:50%; transform:translate(-50%,25vh) scale(0); animation:bubbleUp @bubbling-duration*1s infinite; opacity:0; .fa{ transform:translateX(12.5vw) rotate(25deg); animation:oscillate @oscillation-duration*1s ease-in-out infinite; } .animation-delays(@i:2) when (@i <= @noOfHearts){ &:nth-child(@{i}){ animation-delay:(@i - 1)*@bubbling-duration*0.25s; .fa{ animation-delay:(@i - 1)*@oscillation-duration*0.25s; } } .animation-delays(@i + 1); } .animation-delays; } @keyframes bubbleUp{ 50%{opacity:1} 100%{transform:translate(-50%,-25vh) scale(2);} } @keyframes oscillate{ 50%{transform:translateX(-12.5vw) rotate(-25deg);} } } .bubbling-heart-animation(2,4);//parameters => up-down duration, left-right duration |
Code is also available at https://codepen.io/zFunx/pen/zRPRwG. You can check official LESS website for learning.
