Fast & easy CSS Valentine’s Day Animation (Heartbeat)

---

New: Check also pure CSS Heart Shape & Heartbeat Animation.

Demo:

What do you need to do?

You need to have an image of the heart in .png format (you can use mine below) and:

1. Add HTML
2. Add CSS
3. Add CSS Animation

Step1

Add HTML

<div class="valentinesDay">
  <h1>Happy Valentine's Day!</h1>
 <img src="https://lenadesignorg.files.wordpress.com/2020/02/heart.png?w=640" class="heart" alt="heart" />
</div>

Step2.

Add CSS

Set the color and the position of the background and elements:

body {
  background-color: #E1594C;
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.valentinesDay {
  position: relative;
}
.heart {
  position: relative;
}

Step3.

Add CSS Animation

Add to .heart:

animation: .8s infinite beat;

and add @keyframes to create the Heartbeat:

@keyframes beat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

Enjoy coding!

Read also:

CSS Valentine’s Day Card

CSS Christmas Tree Snow Globe

Simple CSS Birthday Cake