Before working on Heart pulsing animation, first We have to think about How does the Heart beat? It expands and contracts.. Each pulsing is in same duration/period of time.

This can be easily done with CSS3 animation. No flash or images are required.

  • A heart does not double in size when it beats. 10% change in size looks better to me.
  • I like it getting both larger and smaller
  • When it stops moving altogether it looks dead to me. Even when it isn’t beating. So, it needs to expand or contract a little to look alive :).
  • I explicitly have the heart start end and at normal scale (1) and have the animation in the middle of the sequence. It seems clearer that way to me.

Pure CSS Heart Beat Pulsing Animation

HTML

Html is very simple. Here is the markup language code needed to create the heart shape. basically simply a div tag with a ” heart ” CSS class.

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

CSS

Now, it’s turn to create the heart shape with most advance CSS 3. We need to play with borders and pseudo-elements :before and :after.

.heart {
	position: relative;
	width: 50px;
	-webkit-animation: heart-beats 3s infinite;
	animation: heart-beats 3s infinite;
}

.heart:before,
.heart:after {
	background: #fd3803;
	position: absolute;
	width: 22px;
	height: 35px;
	top: 0;
	left: 22px;
	content: '';
	border-radius: 50px 50px 0 0;
	transform: rotate(-45deg) translateZ(0);
	-webkit-transform: rotate(-45deg) translateZ(0);
	transform-origin: 0 100%;
	-webkit-transform-origin: 0 100%;
}

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

After applying above CSS we can create a Heart shape, but it is without pulsing effect. Now we have to work on the beautiful ” heart-beat ” animation. CSS Transform scale() will perform this job.
We are creating a CSS keyframe animation i.e heart-beats with infinite loop. So, this heart will always beats 🙂

@keyframes heart-beats {
  0%   { transform: scale(1); background-color:black;}
  7%  { transform: scale(1.2); }
  12%  { transform: scale(1.1); }
  20%  { transform: scale(1.3); }
  60%  { transform: scale(1); }
  100% { transform: scale(0.99); }
}

@-webkit-keyframes heart-beats {
  0%  { -webkit-transform: scale(1); }
  7%  { -webkit-transform: scale(1.2); }
  12% { -webkit-transform: scale(1.1); }
  20% { -webkit-transform: scale(1.3); }
  60% { -webkit-transform: scale(1); }
  100% { -webkit-transform: scale(0.99); }
}

Result / Demo

Heart Beating using CSS3 Animation

Enjoyed this Post?

If you enjoyed this article, feel free to share this tutorial with your friends. Thanks for reading!

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!