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

#webdev #programming #javascript #beginners

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! 🚀