Bubbling Heart Animation

zFunx LESS CSS Tricks February 16, 2018 | 0

Making bubbling heart animation using LESS CSS. LESS is a CSS preprocessor. Search more about it.

[WPGP gif_id=”521″ width=”600″]

Creating hearts

Link Font Awesome CSS. Add this code inside head :

<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 :

<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 :

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 :

.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 :

.bubbling-heart-animation(){
	.bubbling-heart div{
		/*..*/
		animation:bubbleUp 2s infinite;
	}
	
	@keyframes bubbleUp{
		100%{transform:translate(-50%,-25vh);}
	}
}

[WPGP gif_id=”531″ width=”600″]

Create a variable which will control up-down animation duration:

.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 :

@noOfHearts:4;//Write at top

Add delays to animations :

.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;
}

[WPGP gif_id=”534″ width=”600″]

Add fading effect :

.bubbling-heart-animation(@bubbling-duration){
	.bubbling-heart div{
		opacity:0;
		/*..*/
	}
	
	@keyframes bubbleUp{
		50%{opacity:1}
		100%{transform:translate(-50%,-25vh);}
	}
}

[WPGP gif_id=”537″ width=”600″]

Add scaling animation :

.bubbling-heart-animation(@bubbling-duration){
	.bubbling-heart div{
		transform: translate(-50%, 25vh) scale(0);
		/*..*/
	}
	
	@keyframes bubbleUp{
		/*..*/
		100%{transform:translate(-50%,-25vh) scale(2);}
	}
}

[WPGP gif_id=”540″ width=”600″]

Adding left-right animation

.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);}
	}
}

[WPGP gif_id=”543″ width=”600″]

Create a variable which will control left-right animation duration:

.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 :

.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
	}
}

[WPGP gif_id=”546″ width=”600″]

Add delays to left-right animations :

&:nth-child(@{i}){
	animation-delay:(@i - 1)*@bubbling-duration*0.25s;
	
	.fa{
		animation-delay:(@i - 1)*@oscillation-duration*0.25s;//note this
	}
}

[WPGP gif_id=”521″ width=”600″]

Whole code :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<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>

/*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.