What Exactly is CSS Animations?
Back in my days as a Material Scientist, working on different research projects, I was planning to make a career shift to Web Development. So, it was time for me to start learning HTML and CSS. At first, I took a couple of courses in my native language, Turkish, and pretty soon, I thought I was completely done with those two. How wrong I was! I could not see the uncountable opportunities of HTML and CSS and still considered them limited. But look at me now, want to talk about CSS, specifically animations!
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. Here is another great medium article on the topic, for you to read and get a better understanding of the animations.
And this article shows good use of them.
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 the article I mentioned before; “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 having all properties about 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 where to start and where to end. Before we made an animation with the transition. Instead of transition, with keyframes, the code will be more understandable and modifiable. I am giving you an example of it, now.
At this example, with the keyframe, we named our animation and specify where to start and finish. With this syntax, we can indicate our starting point and endpoint and the duration, as you 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 the new generation web pages and getting remarkable attention from developers every day. 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!
Thanks
I would like to thank Joseph Burke for checking on my article and detecting my grammar mistakes.
Also the Microverse for giving me this opportunity to enhance myself on web development.
