How to make Heartbeat Animation using HTML and CSS Code?

How to make Heartbeat Animation using HTML and CSS Code?

Hello there, Coders. We’ll make a Heartbeat animation in this article. A heartbeat animation is a good practice for web development, especially for beginners. We will create a stunning responsive heartbeat animation website using HTML and CSS.

which will help  you in learning the various animation to the elements available through CSS. You should be able to create your own Heartbeat animation effect by the end of this article.

This Animation will look like an actual heartbeat.

I hope you must have got an idea about the project.

So,  Let’s Begin Our Heartbeat Animation Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

Step1: HTML code for Heartbeat Animation

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="" content="">
    <title>Heart</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="heart"> </div>
</body>

</html>

The HTML content is straightforward in our project we just need to add a div tag with a class name as Heart. The div tag is block-level element that covers the whole width of the screen.

That’s all there is to HTML code. So we begin by adding CSS.

100+ Front-end Projects for Web developers (Source Code)

Step2: CSS code for Heartbeat Animation

Cascading Style Sheets (CSS) is a markup language for describing the presentation of a document written in HTML or XML. CSS, like HTML and JavaScript, is a key component of the World Wide Web.

Now we will look at our CSS code

body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92vh;
    background: black;
}

.heart {
    height: 100px;
    width: 100px;
    background: red;
    position: relative;
    transform: rotate(-45deg);
    box-shadow: -10px 10px 90px red;
    animation: heart 0.6s linear infinite;
}

@keyframes heart {
    0% {
        transform: rotate(-45deg) scale(1.00);
    }
    80% {
        transform: rotate(-45deg) scale(0.90);
    }
    100% {
        transform: rotate(-45deg) scale(0.80);
    }
}

.heart::before {
    content: "";
    position: absolute;
    height: 100px;
    width: 100px;
    background: red;
    top: -55%;
    border-radius: 50px;
    box-shadow: -10px 10px 90px red;
}

.heart::after {
    content: "";
    position: absolute;
    height: 100px;
    width: 100px;
    background: red;
    right: -55%;
    border-radius: 50px;
    box-shadow: -10px 10px 90px red;
}

Here We have added our CSS code for the heartbeat effect. First, we have added margin and padding values as zero and display as flex. Then we align the item at center also we provided the minimum height to our body and background colour as black.

body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92vh;
    background: black;
}

Second we just used the class selector to select the block level element(div) and we initialised it’s height and width to 100px and background color as red and we just used the transform property to rotate the element .We also used keyframes so that our animation changes gradually.

heart {
    height: 100px;
    width: 100px;
    background: red;
    position: relative;
    transform: rotate(-45deg);
    box-shadow: -10px 10px 90px red;
    animation: heart 0.6s linear infinite;
}

@keyframes heart {
    0% {
        transform: rotate(-45deg) scale(1.00);
    }
    80% {
        transform: rotate(-45deg) scale(0.90);
    }
    100% {
        transform: rotate(-45deg) scale(0.80);
    }
}

The properties inside(h1:before & h1:after)are the position as absolute and background as red same height and width ,Top is -55% covers the space above -55% relative to the div tag. Also we have the radius to the border as 50px .

50+ Front-end Projects With Source Code | Front-end Projects With Source Code

.heart::before {
    content: "";
    position: absolute;
    height: 100px;
    width: 100px;
    background: red;
    top: -55%;
    border-radius: 50px;
    box-shadow: -10px 10px 90px red;
}

.heart::after {
    content: "";
    position: absolute;
    height: 100px;
    width: 100px;
    background: red;
    right: -55%;
    border-radius: 50px;
    box-shadow: -10px 10px 90px red;
}

 

Output:

Heartbeat Animation using HTML and CSS Code
Heartbeat Animation using HTML and CSS Code

Here we have completed our CSS code and also the project is completed which means we have successfully added the Heartbeat Animation.

Preview Heartbeat Animation

Now We have Successfully created our Heartbeat Animation. You can use this project for developing your frontend skills  and the respective lines of code are given with the code pen link mentioned below.

How To Make A Photo Gallery In HTML,CSS And JAVASCRIPT Code

If you find this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and follow the Code with Random Instagram page.

Written by : @Arun
Code by : @ShahedNoor
Share on:

Leave a Comment