A Simple Guide for CSS Animations

Animations are very useful tools to make pages more appealing. I would like to start with what are animations, give some supplementary information, and give some animation syntax examples.

What are Animations?

Simply put, animations are changes in CSS styling, from one style to another. They make the web experience clearer and more understandable.

Let's face it; animations are everywhere in these new generations of web
applications, whether they are triggered by clicking, hovering, focusing, or anything else. Check out this site about endangered species and think about the industrialization and CSS animations.

As you can see, this website uses different animations to grab the attention of the user, and it is a powerful way of emphasizing the point they are trying to make.

Before animations, I would like to a step back and talk about pseudo selectors first, and then we’ll dive into animations. 

Pseudo Classes

Our good friend MDN says: “A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).” Pseudo-classes are the way of enhancing the user experience more dynamically, relating the style not just with the HTML structure, but also with the external factors (browser history, mouse position, hover...).

I mentioned them because without external factors, like hovering, for example, animations become just for fun and even a burden on the web
site. A quote from a similar article on CSS animations says, “The goal of animations should not solely be entertaining the user, but rather, they should be helping the user better understand what’s going on and how to use your product most effectively.”

Syntax

I won’t go into too much detail here about syntax, but here’s a simple example which is the one-line way of the animation syntax. 

In this example, we gave 'animated-element' a transition property. This
property is changing all other properties during the transition; background-color, how many times it continues, and how every frame changes during time depending on the timing function. 

Keyframes

Keyframes let us determine the boundaries of the animations. How long does it take and from start to end. Before we made an animation with the transition. Instead of transition, with keyframes, the code will be more understandable and modifiable. See the example below.

In this example, with the keyframe, we named our animation and specified where to start and finish. With this syntax, we can indicate our starting point and endpoint and the duration, as you can see. So, it means we can add intermediate parts and be more specific about our animation.

In this example, we add some intermediate stages to our animation and
change the position and the color.

Lastly, here you can look over the browser support for the animations.

Conclusion

To conclude, animations are a cornerstone aspect of new generation
web pages and getting remarkable attention from developers every day. I gave simple examples of them to show how they are powerful and useful.
Whether you use them for illustrative purposes or for emphasizing your point, I encourage you to learn them, master them, and watch your websites come to life!

Acknowledgements:

I would like to thank Joseph Burke for checking on my article and detecting my grammar mistakes.