🚀 Create a Cute Heartbeat Animation with Pure CSS (Easily Add to Your Website!) ❤️

Hey devs! 👋 Want to add a little life to your website? Let’s create a cute heartbeat animation using just CSS! It’s simple, lightweight, and perfect for adding a playful touch to your design. Let’s dive in! 🎉

---

Step 1: The HTML Structure

All you need is a single div to create the heart. Keep it clean and simple!

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

---

Step 2: The CSS Magic

Here’s where the fun begins! We’ll use @keyframes to create the heartbeat effect.

.heartbeat {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  transform: rotate(-45deg); /* Rotate to make it look like a heart */
  animation: beat 1.5s infinite; /* Add the heartbeat animation */
  margin: 100px auto; /* Center it on the page */
}

.heartbeat::before,
.heartbeat::after {
  content: '';
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%; /* Make it round */
  position: absolute;
}

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

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

/* Heartbeat Animation */
@keyframes beat {
  0% {
    transform: scale(1) rotate(-45deg);
  }
  50% {
    transform: scale(1.1) rotate(-45deg);
  }
  100% {
    transform: scale(1) rotate(-45deg);
  }
}

---

Step 3: Add It to Your Website

Just copy the HTML and CSS into your project, and you’re done! You can customize the size, color, and animation speed to fit your design.

---

Why This Works

• Pure CSS: No JavaScript needed! 🎉
• Lightweight: Perfect for performance-focused websites.
• Customizable: Change the color, size, or animation duration to match your brand.

---

Pro Tip 💡

Use this animation for:

• Loading screens 🕒
• Call-to-action buttons 🔔
• Valentine’s Day themes 💘
• Health or fitness websites 🏋️‍♂️

---

Try it out and watch your website come to life! ❤️

Let me know in the comments how you’re using this animation. And don’t forget to share this post with your fellow devs! 🚀

---

CSS #WebDesign #Animation #Frontend #DevTips #WebDev #UIUX