How To Create a Beating Heart Shape Animation Using CSS

Create the HTML structure

Create the HTML structure for the heart shape. We’ll use a div element with the class “heart”:

<div class="heart">
</div>

Add the CSS Styles

.heart{
    position: relative;
    width: 100px;
    height: 90px;
}

The code defines a style for an HTML element with a class of “heart”. The style sets the position of the element to “relative”, which means that the element is positioned relative to its normal position in the document. It also sets the width and height of the element to 100 pixels and 90 pixels, respectively.

.heart:before,
.heart:after{ 
    content: "";
    position: absolute;
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: #CC3E3E;
    border-radius: 50px 50px 0;
    transform-origin: 0 100%;
    transform: rotate(-45deg);
}

The code defines a style for two pseudo-elements (:before and :after) that are associated with an HTML element with a class of “heart”. The style sets the content of the pseudo-elements to an empty string, which means that they do not contain any content themselves.

The style also sets the position of the pseudo-elements to “absolute”, which means that they are positioned relative to their nearest positioned ancestor (if any). If no ancestor is positioned, the pseudo-elements are positioned relative to the initial containing block.

The left and top properties set the position of the pseudo-elements. The width and height properties set the size of the pseudo-elements. The background property sets the background color of the pseudo-elements to a shade of red. The border-radius property rounds the corners of the pseudo-elements.

The transform-origin property sets the origin for the transformation. In this case, it is set to the bottom left corner of the pseudo-elements. The transform property rotates the pseudo-elements by 45 degrees counterclockwise around the origin.

.heart:after{
    left: 0;
    transform: rotate(45deg);
    transform-origin :100% 100%;
}

The code defines a style for a pseudo-element (:after) that is associated with an HTML element with a class of “heart”. The style sets the left property to 0, which means that the pseudo-element will be positioned 0 pixels from the left of its parent element.

The transform property rotates the pseudo-element by 45 degrees clockwise around the origin. The transform-origin property sets the origin for the transformation. In this case, it is set to the bottom right corner of the pseudo-element.

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.4);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.4);
  }
  70% {
    transform: scale(1);
  }
}

The code defines an animation named “heartbeat” using the @keyframes rule. The @keyframes rule is used to define the sequence of styles that an element will follow during an animation.

The animation consists of five keyframes, each with a different transformation. The transform property scales the element by a certain factor.

The first keyframe (0%) specifies that the element should be scaled by a factor of 1 (its normal size). The second keyframe (15%) specifies that the element should be scaled by a factor of 1.4. The third keyframe (30%) specifies that the element should be scaled by a factor of 1 again. This pattern continues for the remaining keyframes.

To apply the animation to an element, you would use the animation property in your CSS. For example:

.heart {
  animation: heartbeat 1.3s infinite;
}

Full CSS

/* Heart shape */
.heart{
    position: relative;
    width: 100px;
    height: 90px;
}
.heart:before,
.heart:after{ 
    content: "";
    position: absolute;
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: #CC3E3E;
    border-radius: 50px 50px 0;
    transform-origin: 0 100%;
    transform: rotate(-45deg);
}
.heart:after{
    left: 0;
    transform: rotate(45deg);
    transform-origin :100% 100%;
}

/* Keyframe animation */
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.4);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.4);
  }
  70% {
    transform: scale(1);
  }
}

/* Apply the animation to the heart shape */
.heart {
  animation: heartbeat 1.3s infinite;
}