CSS3 Animations 101: What are Animations?
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:
- 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
- An animation can be triggered like a transition, but it can also run without being triggered, e.g. immediately after page load
- While a transition will only react when a trigger is activated or deactivated, an animation can loop a finite or infinite number of times
- An animation loop can play forward, in reverse or alternate between the two.
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” 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.
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
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.