In this blog, This code creates a simple animation of a beating heart using HTML, CSS and CSS animation.
The HTML file includes a head section with meta information and a link to a CSS stylesheet, as well as a body section containing a single div with a class of “heart“.
The CSS styles the HTML and sets the layout of the page. The “body” section sets the display of the page to flex, and aligns the content in the center of the page. The background color is also set to #262626.
The “heart” class styles the div created in the HTML to look like a heart shape. The “::before” and “::after” selectors are used to create the shape of the heart by creating two more elements with the same styles as the parent element, but with different transforms applied. The “heart” class also has an animation set to it called “heartbeat” which makes the heart scale up and down in size to give the impression of a beating heart.
Overall this code creates a simple animation of a heart beating using HTML, CSS, and CSS animation.
Video Tutorial of Heartbeat Animation
To see a live demonstration of the Heartbeat Animation, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
You might like this:
- Glowing Text Effect
- Animated Fill Button
- Lighting text effect
- Item Check List
- Button Mirror Reflection
Heartbeat Animation
HTML Part:
Create a new file with the name “index.html” and add the provide code to it. Ensure the file has a “.html” extension.
<!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">
<link rel="stylesheet" href="style.css">
<title>Heartbeat Animation</title>
</head>
<body>
<div class="heart"></div>
</body>
</html>
This HTML webpage displays a “heartbeat animation” by creating a head and body section. The animation is represented by a div with the class “heart” located in the body section of the HTML. CSS creates the “heartbeat animation” as a simple animation that illustrates heartbeats by styling the div with the class “heart” and using CSS animations and transitions.
CSS Part:
Create a new CSS file name “style.css” and copy the provide code into it. Ensure that the file has a “.css” extension.
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #262626;
overflow: hidden;
}
.heart {
position: relative;
width: 100px;
height: 100px;
background: #ff3838;
transform: rotate(45deg);
animation: hrartbeat 1.4s linear infinite;
}
.heart::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ff3838;
transform: translateY(-50%);
border-radius: 50%;
}
.heart::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ff3838;
transform: translateX(-50%);
border-radius: 50%;
}
@keyframes hrartbeat {
0% {
transform: rotate(45deg) scale(1);
}
25% {
transform: rotate(45deg) scale(1);
}
30% {
transform: rotate(45deg) scale(1.4);
}
50% {
transform: rotate(45deg) scale(1.2);
}
70% {
transform: rotate(45deg) scale(1.4);
}
100% {
transform: rotate(45deg) scale(1);
}
}
This CSS stylesheet creates an animation of a beating heart by applying it to an HTML element with the class “heart,” which is made up of three parts: main div, ::before and ::after pseudo-elements.
The HTML document’s body displays as flex and aligns its items in the center, with a minimum height of the full viewport height, and a background color of #262626. The heart element positions relatively, with a width and height of 100px and a background color of #ff3838. It also rotates 45 degrees and runs an animation called “heartbeat” for 1.4 seconds in a linear infinite loop.
The ::before and ::after pseudo-elements create the heart shape by positioning absolutely, with a width and height of 100% and a background color of #ff3838. They also transform with values of translateY(-50%) and translateX(-50%) respectively and have a border-radius of 50%.
The @keyframes for the “heartbeat” animation defines the different stages of the animation by using different transform values for each stage. It starts with rotate(45deg) scale(1) at 0% and ends with rotate(45deg) scale(1) at 100%. At 30%, 50% and 70% the scale is 1.4 and 1.2 respectively.
Summary:
This code creates a simple animation of a beating heart using HTML, CSS, and CSS animation. This HTML file creates a webpage with a beating heart animation, using a head section with meta info and a CSS link, and a body section with a “heart” class div. The CSS styles the HTML, sets the layout, and styles the div as a heart shape, also it has an animation called “heartbeat” which makes the heart scale up and down.
