Bringing web pages to life - CSS animations

by Goran Kovačić, February 17th, 2020

Have you ever thought about how your web page lacks something? All the pieces are in place, everything works just like planned but... Something is missing.

The answer to your question could be a simple CSS animation. You see, our brains are wired to pay attention to moving objects. Just imagine a cat hunting its sworn enemy, the infamous laser dot! With dilated pupils and wiggling butt, it waits to strike!

Do moving objects affect us, humans, that way? No. But, they spur our curiosity.

To animate means to bring to life. Animation can add personality to a web page, lead the user, and make the whole experience more enjoyable. In this post, we're going to walk through the basics of CSS animation.

The basics

Half an hour ago I finished my fun little project - Animating the Thespian logo on the company's web site. Behold!

A good guy that I am, I've decided to let you in on my secret and share what I've learned on my journey. Well, the shortened version actually. Are you ready?

Right. So basically, CSS animations are made up of two building blocks:

  • Keyframes
  • Animation Properties

Now, let's get a little bit more serious and look at each one individually.

#1 - Keyframes

Keyframes define what the animation looks like at each stage of the animation timeline. Does that make sense?

Here's an example of a @keyframes named bounceIn. A name most fitting, if I may add.

@keyframes bounceIn {

0% {

transform: scale(0.1);

opacity: 0;

}

60% {

transform: scale(1.2);

opacity: 1;

}

100% {

transform: scale(1);

}

}

@keyframes bounceIn is consisted out of three stages:

  • The first stage (0%) - element is at 0 opacity and scaled to 10 percent of its size. (So basically it's invisible and very small...)
  • The second stage (60%) - element is at 100% opacity and scaled to 120 percent of its size. (Woah, the element gradually appeared and grew larger than the original.)
  • The third stage (100% ) - element is scaled to its original size. (...)

A quick explanation of what happened: Let's say the duration of our animation is one second. From the span of 0 to 0.6 seconds, our element became visible and grew larger than its original size; And then sadly deflated for 0.4 seconds... The name bounceIn kind of makes sense now, huh?

Maybe you're thinking: "Hey mister, wouldn't a .gif explain this more properly than some written explanation and the use of our imagination?". The answer is yes, but actually no. It so happens that I can not show you the finished product before we are done with the other building block.

#2 - Animation properties

So, we're done with the keyframes part. Our animation will soon come to life, all that is left to do is to define the animation properties.

Animation properties do two things:

  • Assign the @keyframes to the elements that you want to animate
  • Define how the element is animated

To assign the keyframe to an element, we must add two animation properties to the element:

  • Animation name - name of the animation that we defined in the @keyframes (psst, we've called it bounceIn.)
  • Animation duration - the duration of the animation, duh

Our CSS would look like this:

div {

animation-duration: 1s;

animation-name: bounceIn;

}

And voila! That's it, our element will preform the bounceIn animation for one whole second. Of course, that's not all. This is just the bare minimum to make the animation work.

If we want to take our animation play to the next level, we must also include other animation properties, such as animation-delay, animation-iteration-count, animation-fill-mode, etc. Combining all of those could result in a little piece of awesome. Or a catastrophe. It depends on the creator. I will not go into further details since this is not a tutorial blog post, this is just a CSS animation overview.

As promised, here's the bounceIn animation in action. I'll use a magenta circle element for example and assign it the bounceIn keyframe.

Does it look like you've imagined? If yes, then maybe you have a knack for this and should try animating in CSS yourself, let that imagination go wild. If not, well...

Conclusion

CSS animations can be a good way to add personality to your web page, making it more exciting, more engaging, more lifelike. The goal of the animation is to draw the user's attention to important areas of your product and add interest to your interface. Sort of like a marketing helper, if I may, which makes it a very powerful tool in today's world. With a bit of CSS knowledge and a little big brain time, a web page can come to life and send a clearer message to its users.

About the author:
Goran Kovačić
Frontend Developer & UI/UX Designer
The ninja. Proud owner of four cats. Avid Rocket League player and a sports junkie. Likes wolves. Dislikes talking about himself. Apparently isn't able to write a longer author bio.
Need help with CSS animation? Contact us!