In this tutorial I will cover how to add some animations to a like button. As inspiration, I will recreate Twitter’s favorite button from its iOS application. There is already a tutorial on how to recreate Twitter’s like button with a sprite sheet, so instead I will show you how to accomplish the same animation in pure CSS (which is way more badass). In the process I will show you how to use CSS animations in replace of transitions and how to creatively hack SVGs to create some slick animations.

Dissecting the Animation

If we look closely at the icon, we can see that there are three distinct animations going on 1) the resizing of the star, 2) the expanding ring, and 3) the starbursts. By tying all of these animations to a class, we can easily create a cute looking star that animates on a button click.

The Basics

Before we get started with the animations, we need to take care of the basic functionality: toggling a star from gray to yellow. If you are proficient at CSS you can skip this part.

To get a star on your page, I suggest using Font Awesome. It’s an incredibly useful package, which can help you get really solid icons on your site in a matter of seconds. Simply load the package using their CDN and reference the icon.

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css>
  </head>
  <body>
    <button class="star">
      <i class="fa fa-star>
    </button>
  </body>
</html>

Next, we will want to change the color between the two different states: default and active. If you give your button the class star, those states should look like the following.

.star {
  background: none;
  border: none;
  color: #555;
}
.star.active {
  color: #f4c64f;
}

Lastly, you will need a way to transition between the two states when you click on the icon. With the help of a bit of jQuery, you can write a few lines to toggle the active class.

$(".star").click(function(){
  $(this).toggleClass("active");
});

Animating the Popping Star

twitter_spriteBy far the easiest animation to recreate is the resizing star so that it looks like it is popping out. To achieve this, we will use transform: scale. If you look at the sprite sheet by CSS Animations, you will notice that as soon as the star is clicked it disappears, grows out of the remnants of the expanding ring, expands to its maximum size, and then finally settles on its final size. There are potentially two different ways of achieving this goal, with a CSS transition or with a custom animation.

I personally prefer the first method whenever I have to animate between two states, but in this case, we have a problem: the star must animate immediately to transform: scale(0%,0%) as soon as its clicked. The only way to achieve this is if you make a very small change to the transition and use a custom cubic-bezier curve that has a very large negative value right at the beginning to force the star to nearly instantaneously shrink to near zero before popping back up.

I have written up a Codepen to demonstrate how it would work. Notice how I use transform: scale(1.001%,1.001%). This ensures that the transition is activated. I then use outrageously large values for the custom cubic-bezier curve to force the square to shrink as soon as it is clicked.

See the Pen Bezier Curve Test by Matthew Bolanos (@matthewbolanos) on CodePen.

Besides looking incredibly hacky, easing functions with values outside of [0,1] are not supported in older versions of Webkit. If the animations above do not work, that is why. That being said, I won’t stop you from using this method. Instead, however, I suggest that you create a custom animation with key-frames for each of the different states of the animation. That is what I will do for the remainder of the animations in this tutorial. The first animation I will create will be called popping.

@-webkit-keyframes popping {
  0%   { -webkit-transform: scale(0,.00);}
  40%  { -webkit-transform: scale(0,0);}
  75%  { -webkit-transform: scale(1.3,1.3)}
  100% { -webkit-transform: scale(1,1);}
}
@keyframes popping {
  0%   { transform: scale(0,0);}
  40%  { transform: scale(0,0);}
  75%  { transform: scale(1.3,1.3)}
  100% { transform: scale(1,1);}
}

You should notice that I mapped the key-frames directly to the states I had mentioned previously: invisible (0%), oversized (130%), and normal (100%). You will then want to attach this animation to the active state so that it starts when the button is clicked.

.star.active .fa-star {
  -webkit-animation: popping .5s 1;
  animation:         popping .5s 1;
}

The 1 at the end of each line indicates that the animation should loop only once. This is important since we do not want our star to keep popping indefinitely. You should now have something that looks like the following Codepen. I added a bit of extra CSS to center the star and to add a bit of fading to the color.

See the Pen Simple Cute Star: Popping by Matthew Bolanos (@matthewbolanos) on CodePen.

Animating the Expanding Ring

The expanding ring is a bit more complex because a couple of things are going on. First it acts as an expanding circle and then it hollows out. If we instead imagine the animation as a border that thickens and then narrows while the radius increases, things get a bit easier. To achieve this we will have two different animations: ring-border-width and ring-size.

@-webkit-keyframes ring-border-width {
  0%   { border-width: 0;}
  50%  { border-width: .25em;}
  100% { border-width: 0;}
}
@keyframes ring-border-width {
  0%   { border-width: 0;}
  50%  { border-width: .25em;}
  100% { border-width: 0;}
}

@-webkit-keyframes ring-size {
  0%   { width: 0;height:0; }
  100% { width: 1.5em;height:1.5em; }
}
@keyframes ring-size {
  0%   { width: 0;height:0; }
  100% { width: 1.5em;height:1.5em; }
}

Now that we have our animation, we need to attach it to our star. You could create a new element inside of the button, but I like to take advantage of before and after tags. In the following Codepen I did just that as well as add some CSS to center the expanding ring.

See the Pen Simple Cute Star: Expanding Ring by Matthew Bolanos (@matthewbolanos) on CodePen.

Animating the Sparkles

Alright, we are almost done. Now we just need to add the rays of sunshine that shoot out of the star! This is pretty tricky. You could make each ray an element and animate it, but I am here to tell you that there is an easier way, SVGs.

If you have ever played around with the line drawing tutorial from CSS-Tricks you should know that SVGs are incredibly powerful when combined with CSS. While we are not going to be drawing lines in this tutorial, we will take advantage of the stroke-dasharray property. By taking a circle and adjusting the dashed property we can make ourselves a circle of 5 equidistant dots.

See the Pen zvzMMJ by Matthew Bolanos (@matthewbolanos) on CodePen.

You might be thinking, “great, now what?” But now imagine if we were to play around with the border width like in the expanding ring animation. By increasing border-width, those 5 dots can become our 5 rays. Like before, we will create two animations. These will be called sparkles-width and sparkles-size.

@-webkit-keyframes sparkles-width {
  0%   { stroke-width: 0;}
  15%  { stroke-width: 20;}
  100% { stroke-width: 0;}
}
@keyframes sparkles-width {
  0%   { stroke-width: 0;}
  15%  { stroke-width: 20;}
  100% { stroke-width: 0;}
}

@-webkit-keyframes sparkles-size {
  0%   { transform: scale(.2,.2);}
  5%   { transform: scale(.2,.2);}
  85%  { transform: scale(2,2)}
}
@keyframes sparkles-size {
  0%   { transform: scale(.2,.2);}
  5%   { transform: scale(.2,.2);}
  85%  { transform: scale(2,2)}
}

Unlike the expanding radius, we cannot just slap these animation onto a before or after element. You have to put an SVG circle into the button. The final product should look something like this final Codepen.

See the Pen Simple Cute Star: Sparkles by Matthew Bolanos (@matthewbolanos) on CodePen.

Final Remarks

Congrats! You can now recreate Twitter’s favorite button without using sprites! Hopefully this inspires you to add even more fun and whimsical animations for your site.

If you notice that the star animates on page load you can put the animation within an animation class that only gets added when the click event is called.

In Defense of “Pretty” Animations

Some people might say animations like this are a bit much. At best, they are unnecessary gimmicks, while at worst, they are annoying time-wasters. Yes, animations should be used sparingly and purposefully; you shouldn’t overload your app with time-sucking, useless animations that merely annoy users.

I take issue, however, with purely utilitarian approaches to animations. Sophie Paxton took this approach in her most recent post, Your UI isn’t a Disney Movie. For her, you need to “be able to justify the use of each animation in terms of benefit to the user” before including it within an application. I personally would take a more inclusive approach to animations. As long as it does not interfere with a user’s goals, an animation should be welcome.

Some of my favorite apps like Twitter and Swarm have numerous subtle, yet playful animations. While they don’t directly benefit the user, they don’t get in the way of users’ goals and in the process they give their apps a bit of character.

Some of the best places to include a subtle animation are on buttons that toggle between different states. Buttons like check boxes and radio buttons are perfect candidates for animations because a user does not need to wait for the animation to complete before starting his or her next task. Once a user presses a button, the interaction with that element is essentially complete. Any extra flair is just icing on the cake, not an annoying delay. Twitter’s like button is no different.

I hope you enjoyed this tutorial. It was my first one and it was a blast to write. Check back often because I’m planning to have many more in the coming weeks.