Vanilla CSS - Icon Animation

#css #beginners

Song of the Week

In my last post I covered how to create animations with vanilla CSS, and this week I wanted to build on that by showing you how use animations in a practical way. When building a web page it's very common to add clickable icons on the page that link to other sites, like a related social media account. Giving that icon an animation improves the user experience by indicating that the icon is clickable.

Pseudo-class `:hover`

A quick and easy way to make an icon interactive is to increase its size when the mouse hovers over it. We can do that with the :hover pseudo-class. This pseudo-class allows us to change the styling of the icon based on the state it's in. So in this case, we are changing the styling whenever the mouse hovers over the icon.

If you click on the CSS tab in the codepen above, you can see that following code towards the bottom.

#linkedin:hover {
  transform: scale(1.1);
}

This selector identifies the element with id="linkedin" and indicates that the following styling should be applied when the mouse hovers over that element. The styling being applied is the transform property with a value of scale(1.1). This causes the element to increase in size by a factor of 1.1. You can decrease the size of the element if you enter a number below 1 into the scale function.

Color Transition

Increasing the size of the icon is cool, but what if we wanted to change the color of the icon as well. For this we'll need to create an animation in CSS similar to the ones we created last week.

To create this affect, the following code was added to the CSS.

#linkedin:hover {
  transform: scale(1.1);
  animation-name: linkedin-icon;
  animation-duration: 500ms;
}

@keyframes linkedin-icon {
  100% {
    background-color: #0077B5;
    color: white;
  }
}

The animation-name property links the animation in the @keyframes block below to the #linkedin:hover block, so when the mouse hovers over the icon it will trigger the animation. Notice that @keyframes block only has a 100% style block. Normally there is a 0% style block which specifies starting the properties. Without it, the element will start at it's default properties and then transition to the properties in the 100% over the animation-duration.

Animation Fill Mode

You may have noticed that the icon did not stay blue after the animation was complete. That's because the default behavior is for the element to return to the styling before the animation was applied. If the you want the icon to retain the properties it had at the end of the animation, you need to specify that with the animation-fill-mode property.

The final change to the CSS can be seen below.

#linkedin:hover {
  transform: scale(1.1);
  animation-name: linkedin-icon;
  animation-duration: 500ms;
  animation-fill-mode: forwards;
}

@keyframes linkedin-icon {
  100% {
    background-color: #0077B5;
    color: white;
  }
}

In the #linkedin:hover block animation-fill-mode is set to forwards. This tells the web browser that you want the styling at the end of the animation to continue to be applied to the element even after the animation is complete.

Takeaways

And that's it. Now you have some simple tools to make links or buttons on your web pages more interaction. Let's quickly review the tools we used.

Pseudo-class :hover - When added immediately after the CSS selector it will apply the styling in the block when the mouse hovers over the element.
transform: scale(1.1); - Increases the size of the element by a factor of 1.1. Entering a number less than 1 will decrease the element's size.
animation-name: animation_name; - Tells the web browser which @keyframes it should apply during the element's animation.
@keyframes animation_name {0%{/*css styling*/} 100%{/*css styling*/}} - Describes the states that the element should transition through to create the animation (0% = starting state and 100% = ending state). The "animation_name" should match the one used for the animation-name of the appropriate element.
animation-duration: /*time in seconds*/; - Tells the web browser how long it should take to complete the animation.
animation-fill-mode: forwards; - Tells the web browser to continue applying the styling that was applied at the end of the animation.