Vanilla CSS - Icon Animation
Tags: css, beginners
Published: 2020-04-27 04:13:14

###Song of the Week
{% soundcloud https://soundcloud.com/alexcavoli-2/together %}
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.

{% codepen https://codepen.io/lofiandcode/pen/JjYNLPq %}

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

```css
#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.

{% codepen https://codepen.io/lofiandcode/pen/oNjWqzg %}

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

```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.

{% codepen https://codepen.io/lofiandcode/pen/GRpmQXJ %}

The final change to the CSS can be seen below.
```css
#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.

If you'd like to learn more about this topic, click the links under References.

##References
[Icons Cover Image - freevector.com](https://www.freevector.com/social-media-icons)
[FreeCodeCamp.org - Responsive Web Design/Applied Visual Design](https://www.freecodecamp.org/)
[CSS Pseudo-classes - w3schools.com](https://www.w3schools.com/css/css_pseudo_classes.asp)
[CSS Styling Links - w3schools.com](https://www.w3schools.com/css/css_link.asp)
[CSS @keyframes Rules - w3schools.com](https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp)
[CSS animation-fill-mode Property - w3schools.com](https://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp)
[Scale Icon on Hover CodePen](https://codepen.io/lofiandcode/pen/JjYNLPq)
[Icon Animation without Animation Fill Mode CodePen](https://codepen.io/lofiandcode/pen/oNjWqzg)
[Complete Icon Animation CodePen](https://codepen.io/lofiandcode/pen/GRpmQXJ)