Bubbling Heart Animation

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

Creating hearts

Link Font Awesome CSS. Add this code inside head :

Add four hearts as code shown below :

four black hearts

Add colors :

four pink hearts with deep pink background

Positioning hearts

Position hearts at bottom center as we will animate them from bottom to top :

four overlapped heart at bottom center

Adding Up-Down Animation

Add the following keyframe animation :

GIF heart animating up-down

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

Create one more variable where you will define number of hearts :

Add delays to animations :

GIF four hearts with up-down animation

Add fading effect :

GIF four hearts with up-down animation and fading effect

Add scaling animation :

GIF four hearts with up-down animation, fading effect and scaling animation

Adding left-right animation

GIF four hearts with up-down and left-right animation

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

Add rotation animation :

GIF four hearts with up-down and left-right animation and rotation animation

Add delays to left-right animations :

GIF

Whole code :

Code is also available at https://codepen.io/zFunx/pen/zRPRwG. You can check official LESS website for learning.