My story with CSS animations begins when I was trying to figure out how to become a unicorn in the programming world, the mixing between designing a User Interface (UI) for working in the back-end later it was quite impressive and hard for me, a person with a fully theoretical/academic knowledge foundation, but, at one moment, my fairy godmother appeared in front of my eyes, pure CSS animations brought my page to life and started to give me the magic that I was needing for... Creativity.
Yes, you can laugh because CSS animations can’t compare in dynamic with Javascript or jQuery ones, but, even if you can’t believe it, CSS is one of the most effective ways to animate today. Why is that? Let’s talk about it...
An app, a platform or a web page solves a necessity, that’s the main goal that you have to stick for as developer, but for accomplish that goal you need to pay attention to oblique details, users have high expectations of the UI’s they use, elements changing its features throughout the visit, (animation), can reach this particular point very nicely and change someone’s experience in the web, it doesn't matter whether you are using a desktop computer or a mobile device, it WILL affect the full experience in a psychological level, and for sure, the effect will be reflected in the downloads or visits.
Then... What does CSS offer you?
CSS animations gives you a very well defined features for apply:
- The states of the change or interpolated states in animation, are known as keyframe states, it defines the animation’s what(animated element), when(animation timeline) and how(animation's behavioral code), and you can manipulate it with the @keyframe rules.
- The changing features are element's CSS properties, they are easy to control since you defined them, from the start, when you created your element.
- The browser itself manages the animations resolving the problem of the wide spectrum of screen resolutions by optimizing the duo responsiveness/efficiency making your animations run faster.
Quickly and easy to use, if you follow the @keyframe rules your animation it's done, the simplicity of CSS animations is the main reason why its implementation is so widely spread, even being referenced, in the community, as “hardware accelerated” or “mobile-friendly” animations, 'cause the browser it's the one doing the job.
However, everything has its pros and cons, in CSS:
- Keyframe states don’t have full flexibility, which means that you can’t control how your animation behaves between interpolated states, (yes, you can do it in Javascript, but it costs you speed).
- You will face a browser compatibility problem, and you need to have that in mind.
- In older browsers you will have to prefix your keyframe with the -moz, -webkit, -ms, -o appropriate text or use an awesome library.
All of this leaves you with a limitation in complexity or how you can animate something, its simplicity is also a bad feature. So, the question persists, and even, we can expand it by asking: Why you should bother about CSS animations?
The truth behind that question is simple, as simple as animating in CSS, it’s a matter of equilibrium. Thanks to whatever you believe on, CSS animations are about “only one action”, (declarative approach), this allows an element to express a behavior throughout time without an explicit control behind, giving you not only readable code, but also facilities for maintenance, and along with it's natural opposite, the imperative approach of JavaScript animations, where control flow is explicit in the code, you can provide balance to your product, by focusing in CSS when your animations needs only a specific action for a specific element; Javascript animations when you need complexity and control, (not discussed in this article), or maybe a mixing between the two approaches, giving you a complete and equilibrated product, from the appearance to the behaviour.
Conclusion?
CSS animations are a essential part of web development, and programming world is moving, faster than ever, into a declarative approach, (thanks to some smart guys in the shadows), if it's good or bad, i'm not sure, but this means that you, as developer, need to focus more in the what and less in the how.
(No one will clap you by the way, but users will engage more with your product, and who doesn't love that?).
Random annex...
Some tips for good start in making your own custom animations:
- Always think first in what you want to provide and how it looks. Be freely creative and start drawing, whether in paper or in software.
- Select the elements that need to be animated, and identify what change do you want.
- Type and start with practice.
- Try out with different CSS properties, CSS animations work for all elements and ::before / ::after pseudo elements, that gives a very big range of possibilities to try out for CSS art.
- Separate the style / art of the keyframe logic, one of the best ways for having in mind what is happening with your element is to write a list of questions about the behavior of your element and the answer to that question with a “yes” or “no”.
- And last but not less important, be sure you understand the Critical Rendering Path.
- Use performance DevTools in your browsers.
And remember, ideas CAN change your world.