Categories
CSS Web development

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

You're the CSS to my HTML.
Do you like this gif? Check more gifs in theĀ store.

Valentine’s Day is a time when people show feelings of love, so at this time you can show your love with CSS Animation!

*animation opened in the Safari browser.
To see the live output click here.

What do you need to do? You need to have one image of a heart in png. format (you can use mine below) and:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation
You can use my image to create a CSS Heartbeat.

Step1

Add HTML

<h1>Happy Valentine's Day!</h1>
<div class="container">
 <img src="https://lenadesign.org/wp-content/uploads/2020/02/heart.png?w=640" class="heart" alt="heart" />
</div>

Step2.

Add CSS

body {
  background: #E1594C;
  text-align: center;
}
h1{
color: white;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.heart {
      margin: 0;
      position: relative;
}

Step3.

Add CSS Animation

Add to .heart:

animation: .8s infinite beat;

and add @keyframes to create a 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);
  }
}

To see the live output visit: lenastanley.com.

Enjoy coding!

Leave a Reply