dev.to

How to Create a Heartbeat Animation with CSS

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: .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: Heartbeat Animation .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); } } 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!

Feb 14, 2025 - 13:32

How to Create a Heartbeat Animation with CSS

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:



.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.