CSS Pulse Heart Animation ❤️ Examples
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>
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>
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>
