How to Create Twitter Pure CSS Heart Animation

Did you notice animation on twitter when you do press heart button? Yep! That’s what I am going to create this heart animation with pure CSS. It’s a heartbeat CSS animation that works when the user hovers it.

We do use the series of images instead of using CSS transitions to make it easier to understand. The animation will be the use of a series of pictures.

Let’s have a look at how to create it.

How to Create Heartbeat animation with CSS

Let’s first talk about the HTML, and you will surprise that the HTML is nothing but just a div with the class name heart.

<section>
   <div class="rt-container">
      <div class="heart"></div>
   </div>
</section>

The Styling

The class .heart, we first define the width and height to 100 pixels. Next, the position will be absolute with a 50% value of it’s left and topside.

Then we translate method and setting the -50% values at both axes. A background image will be a series of heart images with its zero position. Finally, we will have an animation at speed 1s.

.heart {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url(https://cssanimation.rocks/images/posts/steps/heart.png) no-repeat;
  background-position: 0 0;
  cursor: pointer;
  animation: fave-heart 1s steps(28);
}

on-hover, we do change the position of background.

.heart:hover {
  background-position: -2800px 0;
  transition: background 1s steps(28);
}

Finally, the code is to make the @keyframe.

@keyframes fave-heart {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2800px 0;
  }
}

I recently found another example of the Twitter heart animation among the picks on CodePen. It used pure CSS technique and no JavaScript. It is an improved version and has a click functionality.

I hope you like this CSS based heart animation. If you have any questions or suggestions, let me know by comment below.