Pulsing Heart Animation Using HTML and CSS

Pulsing Heart Animation Using HTML and CSS

Pulsing Heart Animation Using HTML and CSS

In this article, you will learn how to create Pulsing Heart Animation using HTML and CSS. Earlier I shared with you different types of Pulsing Animation Effects. However, in this tutorial, you will learn how to create CSS Pulsing Heart Animation Effect. 

This CSS heartbeat animation project you may not be able to use in any of your professional work. But it will also give you some idea about CSS if you are a beginner.

CSS Pulsing Heart Animation

This project made by CSS is much more beautiful and interesting. Here is a heart sign that will be small and big. With this, the size of the text here will continue to be smaller and larger at regular intervals.

To create this CSS heartbeat animation you need to have a basic idea about HTML and CSS. Below I have given a demo that will help you to know how this animation works.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

How to create Pulsing Heart Animation

Hope you like the preview above and find out how this Pulsing Heart works. Below I have shared all the tutorials and explained each step with pictures.

Step 1: The basic structure of the heart

I have created the basic structure of this Pulsing Heart Animation using the following HTML codes. This small amount of HTML code has been used for the whole project. All other work is done by CSS.

<p class=”heart”>
  <strong>I Love <br>You</strong>
</p>

The webpage has been designed by CSS below and radial gradient color has been used in the background.

* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
animation: pulse 3s ease-out infinite;
background: radial-gradient(250px 250px, #ffffff, rgba(0, 0, 0, 0) 1000px), #333;
overflow: hidden;
font-family: ‘Akaya Telivigala’, cursive;
}
The basic structure of the heart

Step 2: Basic design of heart

Some of these heart structures have been designed by the following CSS. Red color has been used in the background here. 

This quadrilateral is rotated at an angle of 45 degrees and the width and height of this structure are 8em.

.heart {
background-color: #ff4040;
border-bottom-right-radius: 0.8em;
height: 8em;
margin: auto;
position: relative;
top: calc( (100% – 8em ) / 2 );
width: 8em;
transform: rotate(45deg);
}
Basic design of heart

Now two circles have been created using before after. Those two circles have made this hat structure absolutely perfect.

.heart:before, .heart:after {
background-color: inherit;
border-radius: 8em;
content: “”;
height: 8em;
left: 0;
position: absolute;
top: 0;
width: 8em;
z-index: 0;
}
.heart:before {
top: -4em;
}
.heart:after {
left: -4em;
}
two circles have been created using before after

Step 3: Design the text in the heart

Now the following CSS has been used to design the text in this hat structure. Here font-size: 2.5em is used to increase the text size.

.heart > strong {
color: #fff;
font-size: 2.5em;
display: block;
position: relative;
text-align: center;
width: 5em;
z-index: 1;
transform: rotate(-45deg) translateX(-0.9em) translateY(-1em);
}
Pure CSS Pulsating Heart Animation

Step 4: Activate Pulsing Heart Animation with CSS

The following @keyframes are used to make the animation work. Here the size of the heart has to be made smaller and bigger in different percentages.

@keyframes pulse {
0% {
  font-size: 20px;
}
50% {
  font-size: 30px;
}
100% {
  font-size: 20px;
}
}

Hopefully from the above tutorial, you have learned how to create this Pulsing Heart CSS animation. If there is any problem then you can definitely let me know by commenting. 

Earlier I shared with you many more types of CSS Pulsing Heart Animation tutorials designed on this hard animation.