Heartbeat animation using html and css

In this Article, we will learn to create Heartbeat animation using html and css with source code. Heartbeat animation using html and css becomes simple with the given tutorial, which provides a simple step-by-step process to design heartbeat animation using html and css. So, let's go and follow the steps carefully.

Steps to create Heartbeat animation using html and css

Here are the Steps to create Heartbeat animation using html and css as given below :-

1) Creating File on VS CODE :

Open VS Code, Create a new folder and add html and css file.

2) Adding HTML :

Add the .html file in the project folder and give it the name as - index.html.

3) Copy and Paste HTML code :

copy the following code and paste it in index.html file.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Heartbeat animation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="heart">
  <div class="heartbeat">❤️</div>
  <div class="heartecho">❤️</div>
</div>
</body>
</html>

4) Adding CSS :

Add the .css file in the project folder and give it the name as - style.css.

5) Copy and Paste CSS code :

copy the following code and paste it in style.css file.

body {
  background: #111115;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.heart {
  font-size: 6em;
  position: relative;
}

.heartbeat {
  position: relative;
  z-index: 1;
  animation: beat 2s linear infinite;
}

.heartecho {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation: echo 2s linear infinite;
}

@keyframes beat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(0.9);
  }
  21% {
    transform: scale(1.1) skew(0.004turn)
  }
  28% {
    transform: scale(1) skew(0.008turn);
  }
  35% {
    transform: scale(1) skew(0)
  }
}

@keyframes echo {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }

  14% {
    opacity: 0.4;
    transform: scale(0.8);
  }

  21% {
    opacity: 0.4;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}

About the code -

In this code, we used html to create a structure of the Heartbeat animation using html and css using html and css to design its structure. we've created a heartbeat animation which includes the heart emoji in div tags and it includes the keyframes properties to the css for animation.

About the project -

In this project, we've created the Heartbeat animation using html and css. In Heartbeat animation, the heart emoji is showing animation like a heartbeat. That project is created for fun only.

Hope this tutorial will help you to create Heartbeat animation using html and css easily with source code. if you have any confusion then you can contact with us on our coding community.

Also, checkout our website for more information and join our coding community on telegram to get more knowledge about coding.