Hello wizards 👋,
Welcome to CSS Animation Series (Part-01/10)
Today in this blog you’ll learn how to create the "Heart Pulse Animation" project using HTML, & CSS.
In the above video, you’ve seen the making of the "Heart Pulse Animation" and I hope now you can create this type of animation. If not, I have provided all the HTML & CSS code below.
Heart Pulse Animation [Source Code]
To get the following HTML, CSS & JS code for the Heart Pulse Animation. You need to create three files one is an HTML file, and another one is a CSS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with a .html extension for HTML code & .css extension for CSS code.
You can also download all source code files from the given download button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heart Pulse Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Heart Pulse Animation</h1>
<img src="heart.png" class="pulse" alt="heart">
</body>
</html>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
font-family: sans-serif;
background-color: slateblue;
color: white;
}
.pulse {
width: 180px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}