How to make Heartbeat Animation using HTML and CSS Code?

How to make Heart Animation using HTML and CSS Code?

How to make Heart Animation using HTML and CSS Code?

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

This Animation will look like an actual heartbeat.

Code byShahedNoor
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesNo
ResponsiveYES
Heartbeat Animation  Table

50+ HTML, CSS & JavaScript Projects With Source Code

Heartbeat Animation is a simple project in which we will utilise an css concept to make the heart shape of a heart that will be animated in a manner similar to how a genuine heart would beat as a result of the inflow and outflow of oxygen within our hearts. In this project, we’ll make a heartbeat animation that is similar to that.

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">Your 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.

Output:

Heart Animation using HTML and CSS Code

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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;
}

Step1: 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 the center also we provided the minimum height to our body and background colour as black.

Portfolio Website using HTML and CSS (Source Code)

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

Heart Animation using HTML and CSS Code

Step 2: Second we just create Class Seceltor in Css for targeting the Heart class selector to select the block level element(div) and we initialized its height and width to 100px and the background color gives red to the heart and we just used the transform property to rotate the heart. 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);
    }
}

Step3: 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 .

10+ HTML CSS Projects For Beginners (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

Live Preview Of Heartbeat Animation Using HTML and CSS 

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.

ADVERTISEMENT

Restaurant Website Using HTML And CSS With Source Code

ADVERTISEMENT

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.

ADVERTISEMENT

 
Written by : @Arun
 
Code by : @ShahedNoor

Which code editor do you use for this Heartbeat Animation project coding?

I personally recommend using VS Code Studio, it’s very simple and easy to use.

ADVERTISEMENT

is this project responsive or not?

Yes! this project is a responsive project.

ADVERTISEMENT

Do you use any external links to create this project?

No!



Leave a Reply