What Are CSS Animations?

You obviously know what an animation is - what I'm tryng to get at here are the different kinds of CSS Animations. There are the kind we already using without thinking - transition animations, then there is the widely supported, but extremely basic CSS3 Keyframe Animations, and finally there are the significantly less supported Web Animations API.

Transition Animations

Yes we know about these, we use them for :hover or :focus states all over our current sites. These animations are the least taxing on browsers (and therefore have the lowest impact on site performance/speed).

Sidenote on Speed & Performance: Animating opacity and transforms hinder performace the least, and are the least taxing on browsers. Changing a layout with animation (width, display, etc.) is the most taxing on browsers, and therefore hinder speed the most.

Be wary of heavy animations, because slow or browser-heavy animations could cause the enitre page to repaint! (Ex: Say you're reading an article on your phone, and an add suddenly causes the page to reload or jump.)

In case you don't know the full shorthand for CSS transitions, here it is:

  .example {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

While we know a lot on how to use transition animations, one aspect of them that's always remained somewhat of a mystery to me are easing curves. An article I read talked about using easing curves in a really basic sense - thinking about using them in the same way motion occurs. For example, if you are driving somewhere, it takes you a bit of time to pick up speed (ease-in) & when you're arriving at your destination, likewise it takes some time to slow down (ease-out). Basically, your transition animations should generally ease-in on :hover, then ease-out when you move your mouse away (ease-in-out). There are also a lot of other easing-curves, and while I'm no expert on all of them, these line graphs do a really good job of explaining all of your options.

CSS Keyframe Animations

To find support for CSS keyframe animations or Web Animations API checkout caniuse.com. Basically, these keyframe animations can do most of what another transition animation can do, but with the ability to repeat the animation, and have greater control. Ideally, as we learn more about animations, we can come back to this specific topic, or learn together for more info.

Web Animations API

These animations are really the bleeding edge of what you can do on the web. These animations are javascript based, and edit the browser's DOM. Translation: they are a lot more taxing on the browser. Browsers weren't initially conceived to do this kind of thing, and they've been slow to adopt. The spec for this is still being edited, and Chrome & Firefox are the only browsers that have any kind of support.

What is cool about these is that they're really on their way to becoming a replacement for Flash - which is now officially dead. Web Animations API have the ability to create what most relate to auto-playing, video animations. But, with great power, comes great responsibility...

When to Use CSS Animations

I'm a big fan of The Web Ahead Podcast, and this episode talked a lot about when to use animations & how to avoid misusing animations. The idea of when and when not to use animations focused around an idea of 6 major uses of web animation

  1. Causality (click submit button and form dissapears)
  2. Feedback (pressing a button, or video has loaded)
  3. Relationship (tie where you’ve been with where you are - iOS enlarging app rather than a straight jump, animating page transition, etc.)
  4. Progression (loading bar)
  5. Physics (skeuomorphic design - using easings to make motion more believable)
  6. Transition (think CSS transition animations)

Some potential use-cases for us, surrounding these major uses could include animating calls to action, using parallax to tell a story with your page, or even something as simple as bringing in a sticky-nav or mobile-menu. In the podcast, they also mention that if you create an animation that it should fulfill at least 2 purposes (and delight should never be one of them.) Try to think about using animation like, "is this new information coming onto the page, or coming off of the page?" because if it's already there, it probably doesn't need to be animated.

The pitfalls of doing animation wrong: Animation done wrong can annoy the user, slow down a webpage, and potentially illegitimize the entire site. 'Is this spam?' Animation should be incorperated into style-guides and be thought of as a part of the client's digital brand, made from deliberate and consistent decisions.

Ex: You would use a blowtorch to weld, but not to light birthday candles.

Moving Forward

If you want to learn more about CSS Animations, check out this web animation weekly newsletter, or explore the resources below.


5,292 1 52