If you want to know step by step how to create heartbeat css animation then you can see this article of mine. Hope this article helps you.

I have shared a tutorial earlier for css heartbeat pulse animation. You can follow that tutorial.

<div class="heart"></div>

.heart {
width: 100px;
height: 100px;
background-color: red;
position: relative;
transform: scale(1);
animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}

Here’s an example of a CSS heartbeat loading animation:

<div class="heartbeat-loader">
<div class="heartbeat"></div>
</div>

.heartbeat-loader {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}

.heartbeat {
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
position: relative;
animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
0% {
transform: scale(0.8);
opacity: 0.7;
}
50% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(0.8);
opacity: 0.7;
}
}

Remember to include this CSS code within a <style> tag or an external CSS file linked to your HTML document.

If you are looking for Amazing Heart Beat animation with html and css then follow the codes below. It is a simple design you can customize it as per your choice.

<div class="heart-container">
<div class="heart"></div>
</div>

.heart-container {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}

.heart {
position: relative;
width: 100px;
height: 100px;
transform: rotate(45deg);
background-color: #ff4f73;
animation: heartbeat 1s infinite;
}

.heart:before,
.heart:after {
content: "";
position: absolute;
width: 100px;
height: 100px;
background-color: #ff4f73;
border-radius: 50%;
}

.heart:before {
top: -50px;
left: 0;
}

.heart:after {
top: 0;
left: 50px;
}

@keyframes heartbeat {
0% {
transform: scale(0.8) rotate(45deg);
}
50% {
transform: scale(1.2) rotate(45deg);
}
100% {
transform: scale(0.8) rotate(45deg);
}
}