Blogs

CSS3 Animations 101: What are Animations?

Craig Buckler
Share

If you followed my recent series about CSS3 transitions, you’ll understand that they’re an animated effect between a start and end state which is fired by a trigger such as a CSS :hover or JavaScript event.

In this series we’ll look at CSS3 animations. They share many of the same concepts as transitions, but are far more flexible — if a little more difficult to use.

This is the first in a four-part series about CSS3 animations but each article can be read individually or out of sequence. Our initial question…

How are Animations Different to Transitions?

There are a number of critical differences:

  1. Like transitions, an animation can define a start and end state but it can also specify any number of intermediary states to create more sophisticated effects
  2. An animation can be triggered like a transition, but it can also run without being triggered, e.g. immediately after page load
  3. While a transition will only react when a trigger is activated or deactivated, an animation can loop a finite or infinite number of times
  4. An animation loop can play forward, in reverse or alternate between the two.
  5. Animation CSS is more verbose and difficult to write … but it’s indisputably simpler than comparable JavaScript code.

There are those who argue that animations should be handled by JavaScript because they’re behavioral. They’re not. The browser is only tweening frames between states; it’s generating the missing animation frames so you don’t need to. If you want to add complex interactivity or collision control you’ll still need JavaScript.

The benefits for CSS3 animations are the same as transitions: they’re easy to create and fast complex effects are handled by the browser — not your code.

How do You Define an Animation?

An animation is defined using:

Keyframes
“Keyframes” is a term you may have heard in relation to video editing. A single keyframe defines a point during the animation where a known state is specified, e.g.

  • at 0% complete, the background color is blue
  • at 50% complete, the background color is green
  • at 100% complete, the background color is red

You don’t care about all the colors between blue and green or green and red; the browser will determine them.

A set of keyframes is given a name so it can be reused on any number of elements.

Animation Properties
The keyframes are applied to elements using a number of properties which define the name, duration, timing functions and repeating options.

What CSS Properties Can be Animated?

Like CSS3 transitions, you can only animate CSS properties with discrete values which change between keyframes. This includes layout properties (width, height, padding, margins, borders), positional properties (left, right, top, bottom), transformations, font sizes, colors, background colors and opacities.

Properties which use a keyword value such as display: none;, visibility: hidden; or height: auto; cannot be animated. Refer to CSS3 Transition Property Basics for a more detailed explanation and some workarounds.

Cross-Browser Animation Support

CSS3 animations are supported in Firefox, IE10 and Opera 12 without a prefix. At the time of writing, the Webkit browsers including Chrome, Safari and Opera 15+ require the -webkit- prefix on all keyframe and property definitions. IE9 and below do not support animations.

That’s not quite the whole story — open this link in a range of browsers:
View the CSS3 demonstration page…

Firefox, IE10 and Opera 12 work perfectly. Chrome and Opera 15 fail to change the border-radius and background colors. In my experience:

  • Firefox is normally the best-behaved browser and implements animations as you expect.
  • IE10 is generally good but sometimes fails to show certain minor effects such as box-shadows.
  • Opera 12 applies most effects well, but often gets timings wrong.
  • The webkit browsers are quirky (and require a prefix which doubles the quantity of code you need). In this example, the webkit gives up on some CSS properties because there’s a rotation transform. It’s a lesson for any developer who thinks webkit is perfect and should be the only browser engine!

Fortunately, the differences rarely matter. If CSS3 animation fails in some respect, the start and end states should eventually be reached. At worst, no animation will occur — but they should never be critical for content display.

In the next part we’ll define keyframes and the animation properties.