A fun example of a pulsating heart animation

Example of a CSS pulsating heart animation . CSS post

by ITpresent

HTML

<a href="https://itpresent.com/web/css/css_pulse_animation.php">CSS Pulse Heart Animation ❤️ Examples</a>
<br><br>

<div id="box">
<img class="a" src="https://itpresent.com/web/css/images/hearts.png">
<h4>LOVE</h4> 
</div>






















<a href="https://itpresent.com/web/css/css_pulse_animation.php">CSS Pulse Heart Animation ❤️ Examples</a>

CSS

#box{
position: relative;
display: inline-block;
}

h4 {
position: absolute;
margin-top: -225px;
width: 100%;
font-size: 50px;
text-align: center;
color: red;
}

.a {
   width: 300px;
   height: 300px;
	-webkit-animation: pulse 1s linear infinite;
	-moz-animation: pulse 1s linear infinite;
	-ms-animation: pulse 1s linear infinite;
	animation: pulse 1s linear infinite;
	
}

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

}

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

}