Creating A Simple Custom Animation With CSS For Beginners

Photo by Damon Lam on Unsplash

This week I decided to write about custom animations made in CSS, which is something I was instantly drawn to when I first started learning to code. I love that there are virtually endless possibilities, and that the developer has so much power when figuring out how to create their desired effect.

This post is targeting beginners who don’t know a whole lot about creating custom animations for their projects, but want to get started somewhere. I’ll be creating a few custom animations to demonstrate how to achieve certain effects, but I’ll also be briefly discussing the basics of CSS animations, and talking through my thought process start to finish when I have an idea for an animation.

I first learned about CSS animations here — a truly great resource for learning about keyframes and the animation properties. Check it out; I will be touching on some of the things mentioned in that article.

We will need two parts to make a complete animation; Starting with keyframes, and then we’ll tweak the animation properties until we are happy with the result.

Keyframes

Keyframes are where we will be defining the animation we want to achieve. Whether we want something to move, or grow/shrink, or change colors, we will define that here in the keyframes.

Keyframes can also be just as they sound, frames. The developer has the option to put multiple steps in their animation so things happen in a frame by frame sequence.

Let’s jump into our example by starting simple, what do we want to make? What should my animation do? Keep in mind, animations are awesome, but sometimes, too many at once, or too grand of animation is overwhelming to a user, and less is often more. Animations are awesome…in moderation!

With that in mind, I’ll go ahead and recreate an example of a simple animation I used for my roulette app, a flashing effect. I used this animation to highlight the winning number after the wheel spin was complete, and whichever number won, would be flashing yellow on and off.

What CSS properties need to change in order to create a flashing effect?

My first thought is background-color! If we can toggle between a transparent background and a color, we can make the background appear and disappear, giving the illusion of a flash.

Below is our starting elements to work with, as you’ll see, one has a class of make-me-flash — and this is the element we will be making flash.

Now we need to add the keyframes ruleset to our CSS to define our flash animation:

@keyframes flash {
  0% {
    background-color: #faff66;
  }
  50% {
    background-color: transparent;
  }
  100% {
    background-color: #faff66;
  }
}

What happened here? We created a reusable animation called flash, which we can now use on any element of our choosing, so long as we want that thing to flash.

After that, we told keyframes what should happen at each desired step. At 0%, or in the beginning, we want the color to match the original yellow background. Then at 50%, exactly halfway through the animation, we want the background to become transparent, or disappear. Lastly, at 100%, we change the color back to the original yellow to complete the flash effect.

However, until we actually call this animation on an element, we won’t see any sort of effect. This is where we need to actually use the animation properties.

Animation Properties

On the element we want to flash, the one with a class of make-me-flash, we will call the animation like so:

  animation-name: flash; // Name
  animation-duration: 1s; // Desired duration
  animation-iteration-count: infinite; // How many times?

By increasing and decreasing animation-duration, we can effectively make the flash slower and faster. We can also control the amount of times we want our animation to run. I chose infinite for this demonstration, but a lot of times that can be an overwhelming setting. Let’s see our flash animation in effect:

Just like that, we have already created a simple custom animation which helps to convey to our user that they have won the non-existent game they are playing!

Another Simple Effect With More Steps

I’ll wrap up with a cool idea I had for an effect where I want a particular piece of text to rapidly change fonts. My initial thoughts are to create an animation with at least 5 steps where each step can be a different font which I’ll import from Google Fonts.

To start out, let’s go back to our initial set up, except I’ll replace “You Win!” with “Change”.

This time we’ll name our animation fontChange to be descriptive of the effect:

@keyframes fontChange {
  0% {
    font-family: 'Major Mono Display', monospace;
  }
  20% {
    font-family: 'Kaushan Script', cursive;
  }
  40% {
    font-family: 'Lobster', cursive;
  }
  60% {
    font-family: 'Ranchers', cursive;
  }
  80% {
    font-family: 'Bitter', serif;
  }
  100% {
    font-family: 'Major Mono Display', monospace;
  }

This is exactly the same set up as the flash animation, except I’ve added more steps between 0% and 100%. This time instead of affecting background-color, I chose to change font-family. Now, at every step, the font will differ, and eventually return back to the original font at 0%.

Just like before, we need to attach this animation to the appropriate element; this time however, I found it more appropriate to call our new animation on the text element itself, with a class of change-text in the below CodePen:

And hopefully you can start to see the possibilities with this by simply looking at how many CSS properties there are. Each property is changeable step by step with keyframes.

Conclusion

I hope this has at least scratched the surface of custom CSS animations for someone out there. There are so so many more possibilities with movement, and other CSS properties, play around with them!

Thanks for reading if you made it this far, and as always, happy hacking!