Twitter CSS Heart Animation

Author
In CSS Animation, CSS Tutorial Dec 21, 2016
Twitter CSS Heart Animation

Today our tutorial is about creating Twitter CSS Heart Animation. Have you seen twitter Heart Animation? You notice that it have some nice animation when we click on a Twitter favorite button. That is something we are going to create today.

We do use the series of images instead of using CSS transitions to make it easier to understand. The animation will be a use of a series of pictures. Let’s have a look how to create it.

Twitter CSS Heart Animation Markup

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

 

Twitter CSS Heart Animation Styling

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

Then we translate method and setting the -50% values at both axises. A background image will be a series of heart images with its zero position. Finally, we will have 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 find another example of the Twitter heart animation among the picks on CodePen. It used pure CSS technique and no javascript. It is improved version and has a click functionality.

It is done with checkbox hack, and allow you to make the simple on/off switch through form elements and clever CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *