Using CSS Animation to Enhance A Component

by Sjaan Hydrick

January 14th, 2022

So You Want To Spruce Up Your Website Without It Looking Ridiculous

When it comes to CSS, there is a thin line between a website looking elegant and a website looking like a circa-2004 MySpace profile. After all, a bright font on a dark background is not necessarily a bad move, but a bright font on top of a black background pattered with equally bright moving images definitely is.

MySpace Profile

Knowing how easy it is to go overboard with CSS, you might ask yourself: "Why would I want to use CSS animations?" Well, Self, when used appropriately, Css animations are a great way to grab focus, influence user interactions, and generally craft an excellent user experience. CSS animations are also great because they're inherently easy to create. Using CSS animations, you can smoothly change between CSS properties for as long or as many times as you want. So, what's a good application of CSS animations?

Let's take a button.

Unstyled Button

An easy way to style the button is to have it change colors when you hover over it.

Button Change On Hover

Now, what if you want to take it up a notch and have it also glow on hover? Or maybe you also want the button glow to change colors the longer the user hovers over the button. This was, the button is more eye-popping and draws more attention to the button as a clickable object. Through the magic of CSS, you're able to create a simple effect that can have a lot of power.

So how do we make a CSS animation?

Step One: @keyframes

Keyframes are the building block of any CSS animation. You define the CSS styles inside of the @keyframes rule and when during the animation those styles should be called. The first thing to do is created the @keyframes at-rule:

@keyframes button-glow {

}

You start by calling the @keyframes at-rule, then follow it up with an animation name. I've called mine button-glow, but you can name yours whatever you want.

Step Two: define styles

Next, you have to define what styles you want the animation to execute. For example, say we want our button to glow blue violet. You could code the following:

@keyframes button-glow {
    to { box-shadow: 0px 0px 20px blueviolet; }
}

Button Glows BlueViolet On Hover

Easy enough, right? But what if you want to have the glow move from blue violet, to fuschia, then finish with dark slate blue? You can do that using percentages. In the following example, the animation will move from blue violet to fuschia when it's 50% complete, then from fuschia to dark slate blue when it's 100% complete.

@keyframes button-glow {
  0% { box-shadow: 0px 0px 20px blueviolet; }
  50% { box-shadow: 0px 0px 20px fuchsia; }
  100% { box-shadow: 0px 0px 20px darkslateblue; }
}

Button Glows BlueViolet, Fuchsia, and DarkSlateBlue On Hover

Step Three: Applying the Animation

We did it! We made a CSS animation! Now how to attach it to your element? Simply use the animation-name and animation-duration properties on the element you want to apply the animation to. Animation-name is the name of the animation you want the element to execute and animation-duration is how long you want the animation to run for. Since we want our animation to happen on a button the user is hovering over, our code would look like so:

button:hover {
  background-color: purple;
  color: white;
  border: none;
  animation-name: button-glow;
  animation-duration: 3s;
}

@keyframes button-glow {
  0% { box-shadow: 0px 0px 20px blueviolet; }
  50% { box-shadow: 0px 0px 20px fuchsia; }
  100% { box-shadow: 0px 0px 20px darkslateblue; }
}

Great! Our button cycles through box-shadow colors for three seconds. You'll notice that once the animation is over, it disappears. But what if you want it to run on a loop? That's where animation-iteration-count comes in. You can choose a specific number if you want the animation to run through a set number of times before ceasing or you can set the count to infinite if you want the animation to loop, well...infinitely. For our button, we want the animation to loop as long as the user hovers over it, so we'll set our animation-iteration-count to infinite like so:

button:hover {
  background-color: purple;
  color: white;
  border: none;
  animation-name: button-glow;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

Button Hover Animation Looping

There is a way to play the animation in different directions if you don't want it to proceed in a classic beginning-to-end style. We do this using animation-direction. There are four different values for animation-direction: normal, reverse, alternate, and alternate-reverse. The default of animation-direction is normal, in which the animation plays forwards from the beginning as it does in the above example.

With reverse, we play the animation backwards through every iteration. If we have a loop going, we start the animation from end-to-beginning every time.

button:hover {
  background-color: purple;
  color: white;
  border: none;
  animation-name: button-glow;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

@keyframes button-glow {
  0% { box-shadow: 0px 0px 20px blueviolet; }
  50% { box-shadow: 0px 0px 20px fuchsia; }
  100% { box-shadow: 0px 0px 20px darkslateblue; }
}

Animation Loops Backwards

When using alternate, the animation direction reverses every iteration with the first one playing forwards.

button:hover {
  background-color: purple;
  color: white;
  border: none;
  animation-name: button-glow;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes button-glow {
  0% { box-shadow: 0px 0px 20px blueviolet; }
  50% { box-shadow: 0px 0px 20px fuchsia; }
  100% { box-shadow: 0px 0px 20px darkslateblue; }
}

Animation Loops Forwards And Then Backwards

Finally, alternate-reverse reverses every iteration with the first one playing backwards.

button:hover {
  background-color: purple;
  color: white;
  border: none;
  animation-name: button-glow;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

@keyframes button-glow {
  0% { box-shadow: 0px 0px 20px blueviolet; }
  50% { box-shadow: 0px 0px 20px fuchsia; }
  100% { box-shadow: 0px 0px 20px darkslateblue; }
}

Animation Loops Backwards and Then Forwards

Now we can see how the different animation properties work together to give you full customization of a component! To help consolidate the code and make the CSS more readable, the animation properties have a shorthand.

Instead of:

button:hover {
  background-color: purple;
  color: white;
  border: none;
  animation-name: button-glow;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

You can simply write:

button:hover {
  background-color: purple;
  color: white;
  border: none;
  animation: button-glow 3s infinite alternate;
}

Look how far we've come! We went from a plain, unstyled button to a component that clearly signals to a user that it is meant to be interacted with. Animation can be a great tool to brighten the overall user experience and affect the way the site is navigated. There are even more properties you can assign to further customize your animations. So go forth and animate!

Like this post?

Try another post: 5 Essential VSCode Extensions for React Developers

Go Back

Kick your software into gear

hello@kickstand.work