Categories
Web development

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

Learn how to create the Valentine’s Day Animation (Heartbeat).



CSS Valentine's Day

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

Demo:

*to see the animation on the website click here.

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
heart

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