CSS Heart Shape & Heartbeat Animation

---

Demo:

What do you need to do?

To create the CSS Heart Shape & Heartbeat Animation follow the steps below and watch the video tutorial:

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

Step1.

Add HTML

<div class="container">
      <div class="heart"></div>
  </div>

Step2.

Add CSS

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

body {
  background-color: #fae1dd;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
  
.container {
  position: relative;
  animation: .8s beat infinite;
}

Create the heart shape:

.heart {
  position: relative;
  background-color: red;
  display: inline-block;
  height: 60px;
  top:0;
  left:0;
  transform: rotate(-45deg);
  width:60px;
}
  
.heart:before, .heart:after {
  content:"";
  background-color: red;
  border-radius:50%;
  height: 60px;
  width: 60px;
  position: absolute;
  width: 60px;
  }
  
.heart:before {
  top:-30px;
  left:0;}
  
.heart:after {
  left:30px;
  top:0;}

Step3.

Add CSS Animation

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

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Valentine’s Day Card

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

Valentine’s Day