Ever wanted to make your website feel alive?
Let’s animate a heart that beats because...why not?
No JavaScript. No libraries. Just pure CSS magic.
Step 1: The Basic Heart
First, we’ll use CSS to create a heart shape with ::before and ::after pseudo-elements:
<div class="heart"></div>
.heart {
position: relative;
width: 100px;
height: 100px;
background-color: red;
transform: rotate(-45deg);
margin: 50px auto;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
.heart::before {
top: -50px;
left: 0;
}
.heart::after {
left: 50px;
top: 0;
}
Boom! We have a heart.
Now let’s make it beat!
Step 2: Adding the Beat
We’ll use the @keyframes rule to scale the heart in and out:
@keyframes heartbeat {
0%, 100% { transform: scale(1) rotate(-45deg); }
50% { transform: scale(1.2) rotate(-45deg); }
}
.heart {
animation: heartbeat 1s infinite;
}
Now the heart pulses.
Play with the timing to make it feel more natural.
Step 3: Fine-Tuning the Animation
Real heartbeats aren’t perfectly smooth.
Let’s tweak the easing:
@keyframes heartbeat {
0%, 100% { transform: scale(1) rotate(-45deg); }
30% { transform: scale(1.2) rotate(-45deg); }
60% { transform: scale(1) rotate(-45deg); }
80% { transform: scale(1.1) rotate(-45deg); }
}
.heart {
animation: heartbeat 1.2s infinite ease-in-out;
}
Now it’s got a bit more personality.
Full Code
Here's the full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heartbeat Animation</title>
<style>
.heart {
position: relative;
width: 100px;
height: 100px;
background-color: red;
transform: rotate(-45deg);
margin: 50px auto;
animation: heartbeat 1.2s infinite ease-in-out;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
.heart::before {
top: -50px;
left: 0;
}
.heart::after {
left: 50px;
top: 0;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1) rotate(-45deg); }
30% { transform: scale(1.2) rotate(-45deg); }
60% { transform: scale(1) rotate(-45deg); }
80% { transform: scale(1.1) rotate(-45deg); }
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
And the result:
Final Thoughts
CSS is powerful.
No need for JavaScript when a simple animation does the job.
You can use this effect for today (Valentine’s day), a loading screen, or just because hearts are cool.
Try tweaking the colors, sizes, and timing to make it your own.
Happy coding! ❤️
Thanks for reading! If you've enjoyed, feel free to like and follow me for more content!
I also share more content on Digital Minds, so be sure to check it out!
Top comments (2)
Hi there!
Really insightful article!
I’d recommend testing out our tool for analyzing Dev.to posts. You can find it here.
I think it could really help your content reach an even larger audience.
Let me know your feedback :)
Hey! Thanks for the kind words. I checked out your tool, it looks very interesting! However, I didn’t find much guidance on what to do next. Any tips on how to make the most of it?