HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development CSS

How To Create a Beating Heart Shape Animation Using CSS

in CSS
Reading Time: 3 mins read
393 8
0
How To Create a Beating Heart Shape Animation Using CSS
551
SHARES
2.5k
VIEWS
Share on FacebookShare on Twitter

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.

RelatedPosts

How To Transition a Height of Zero to a Height of Auto?

How To Apply CSS to Half of a Character

How To Set Cellpadding and Cellspacing Using CSS

.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;
}

 

Share220Tweet138Share55

Related Posts

How to transition a height of zero to a height of Auto
CSS

How To Transition a Height of Zero to a Height of Auto?

by 22bulbjungle
December 23, 2022
0

In this tutorial, I will show you a workaround to achieve this using CSS. Here on my document are some texts to...

Read more
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
How To Turn Image Into Vintage With CSS

How To Turn Image Into Vintage With CSS

December 21, 2022
Electronics, Smartphone, Computer & Tablet Repair Kit
How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
How To Prevent or Disable Copy and Paste in an Input Field

How To Prevent or Disable Copy and Paste in an Input Field

December 21, 2022
How To Turn Image Into Vintage With CSS

How To Turn Image Into Vintage With CSS

December 21, 2022

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Affiliate Disclosure: 22bulbjungle is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

Recent Tutorials

How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022

Categories

  • CSS
  • Duda Builder
  • Ecommerce
  • Elementor
  • Graphic Design
  • htaccess
  • Javascript
  • jQuery
  • PC Tips
  • Photoshop
  • PHP
  • Responsive design
  • Shopify
  • Video
  • Web Design
  • Web Development
  • Webdev Tips
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2022 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2022 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.