Using CSS pulse effect, we can create pulsating animation of HTML elements without Javascript.
Pulse heart animation is created by transforming CSS properties: width and height.

Example CSS animation pulse ❤️ like text symbol

First need to define an animation property: animation name, duration, iteration-count and add @keyframes rule.
The @keyframes rule specify when the style change will happen in percent, or with the keywords FROM and TO, which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

<p class="a">❤️</p>

<style >

.a {
    font-size: 190px;
    animation: pulse 1s linear infinite;
}

@-webkit-keyframes "pulse" {
0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
50% {
   -webkit-transform: scale(0.8);
   transform: scale(0.8);
}
100% {
    -webkit-transform: scale(1);
   transform: scale(1);
}
}

</style>

result:
❤️

JSFiddle

CodePen




Example CSS animation pulse with images ❤️

<img class="a" src="heart.png">

<style >

.a {
    animation: pulse 1s linear infinite;
}

@-webkit-keyframes "pulse" {
0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
50% {
   -webkit-transform: scale(0.8);
   transform: scale(0.8);
}
100% {
    -webkit-transform: scale(1);
   transform: scale(1);
}
}

</style>

result:

pulsing heart



JSFiddle

CodePen




A fun example of a pulsating heart animation

<div id="box">
   <img class="a" src="heart.png">
    <h1>LOVE </h1>
</div>

<style>

#box{
   position: relative;
   display: inline-block;
   }
h1 {
   position: absolute;
   margin-top: -225px;
   width: 100%;
   font-size: 50px;
   text-align: center;
   color: red;
   }
.a {
    animation: pulse 1s linear infinite;
   }

@-webkit-keyframes "pulse" {
0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    }
50% {
   -webkit-transform: scale(0.8);
   transform: scale(0.8);
    }
100% {
    -webkit-transform: scale(1);
   transform: scale(1);
    }
}

</style>

result:


LOVE


JSFiddle

CodePen