CSS Animation 101

Why animate?

“Animation is about creating the illusion of life.” Brad Bird Before we get into the technical side of CSS animation, let’s discuss why we’re animating in the first place.

More than words alone

Animation can convey information efficiently, or it can be used to grab attention but in the end, it is all about communication.

Movement in our designs gives us a more powerful way to communicate. It transcends verbal and written language.

Subtle and appropriate animation can add appeal to our designs and credibility to our work. This happens because as humans we’re used to seeing movement all the time in the “real” world. Bringing some of that life into our work brings the two closer.

As our web browsers continue to improve and better support animation, it is becoming a more viable option than ever. In many ways animation is as important to web design as the fonts we use and layouts we create.

What is animation on the web?

Animation brings us two main benefits: conveying information and grabbing attention. We can come up with many ways these benefits can help us as we build for the web.