Categories
CSS Web development

Fast & easy CSS 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

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