CSS Heartbeat Animation Code with Demo

This CSS code snippet helps you to create a heartbeat animation. It utilizes CSS3 keyframes to create a heartbeat effect. The HTML structure places the heart within a container. The CSS code defines the heart’s appearance, position, and animation.

You can use this CSS Heartbeat Animation code in websites to add eye-catching animations to elements like buttons, logos, or call-to-action sections

How to Create CSS Heartbeat Animation

1. First, copy and paste the HTML code into your HTML file where you want the animation to appear:

<div id="wrapper">
	<div id="pulsingheart"></div>
</div>

2. Now, include the CSS code within your stylesheet or in a separate CSS file. You can customize the animation to suit your needs. Adjust the size, color, and position of the heart by modifying the CSS properties within the #pulsingheart and #pulsingheart:before, #pulsingheart:after selectors.

#wrapper {
	position: absolute;
  margin-left: 50px;
  margin-top: 50px;
	animation:pulse 1s infinite;
}


#pulsingheart { 
  position: relative; 
  width: 100px; 
  height: 90px;
} 

#pulsingheart:before, #pulsingheart:after { 
  position: absolute; 
  content: ""; 
  left: 50px; 
  top: 0; 
  width: 50px; 
  height: 80px; 
  background: #aa0000; 
  border-radius: 50px 50px 0 0; 
  transform: rotate(-45deg);  
  transform-origin: 0 100%;
  animation:pulsecolor 1s infinite;
} 

#pulsingheart:after { 
  left: 0; 
  transform: rotate(45deg); 
  transform-origin :100% 100%;
  animation:pulsecolor 1s infinite;
}

@keyframes pulse {
	10% {transform: scale(1.1)}
}

@keyframes pulsecolor {
  10% {background: #dd0000}
}

The animation duration is set to 1 second (1000ms) by default. If you want the heartbeat effect to be faster or slower, you can change the values in the @keyframes pulse and @keyframes pulsecolor sections within the CSS code.

To apply the animation to other elements, you can replicate the structure of the HTML and CSS within your project. Simply use the #wrapper and #pulsingheart elements, adjusting their positions and styles as needed.

That’s it! hopefully, you have successfully created Heartbeat Animation. If you have any questions or suggestions, feel free to comment below.