Heart Beat Animation with ReactJS and CSS

Heart.js

import React from 'react';
import './Heart.css';

const Heart = () => {
  return (
    <div className="heart-container">
      <div className="heart"></div>
    </div>
  );
};

export default Heart;

Heart.css

/* Align the heart to the center of the page */
.heart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* creating two circles */
.heart::before,
.heart::after {
    content: "";
    width: 100px;
    height: 100px;
    background-color: #e63946;
    position: absolute;
    border-radius: 50%;
}

.heart::before {
    top: -50px;
}

.heart::after {
    left: 50px;
}

/* Creating square */
.heart {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #e63946;
    transform: rotate(-45deg);
    animation: beat 1s infinite;
}

/* Heart Beat Animation */
@keyframes beat {
    0%, 100% {
        transform: scale(1) rotate(-45deg);
    }
    50% {
        transform: scale(1.2) rotate(-45deg);
    }
}

• By using div with className(.heart) we have created heart shape
• By using the div with the className(.heart-container) we have aligned the heart to the center of the page.
• Heart Shape: We have created the heart by positioning two circular divs (::before and ::after) next to a square div, then rotating the main .heart div by -45deg.
• Animation: The @keyframes beat animation makes the heart scale up and down, creating a “beating” effect.
• 0%, 100%: The heart starts and ends at its original scale (1), so it returns to the original size after each beat.
• 50%: The heart scales up to 1.2 times its original size, creating the “pumping” effect in the middle of each beat cycle.