Firefox 4 came with CSS3 Transitions (ability to animate CSS properties from an initial value to a final one). In Firefox Aurora, we are experimenting with CSS3 Animations: a more powerful way to animate your content with CSS.

Defining the animation

The first thing is to define the intermediary CSS values of the properties to be animated, what is called keyframes in the specification. Users of Adobe Flash authoring tools should be familiar with this concept.

Applying an animation

While Transitions trigger implicitly when property values change, animations are explicitly executed when the animation properties are applied.

More properties

The specification defines other animation properties that opens a broad range of possibilities:

• with animation-timing-function it is possible to take advantage of easings to make animations feel more natural (see demo below)
• animation-direction: alternate; is the auto-reverse of CSS3 Animations. See how it is used to create the loader below.
• without animation-fill-mode: forwards;, the properties will be set back to their initial values at the end of the animation
• and guess what setting animation-play-state to paused would do…

Demo!

You should be using Firefox Aurora, Chrome or Safari 5 to see those demo.
animated translations

zero-image, gracefully degrading loader

a complex animated scene
View Madmanimation with a compatible browser, or watch a screencast of the animation.

You’ve already used CSS3 animations? Let us know in the comment below or submit your demo in the Studio.