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.
The specification defines other animation properties that opens a broad range of possibilities:
animation-timing-functionit 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.
animation-fill-mode: forwards;, the properties will be set back to their initial values at the end of the animation
- and guess what setting
You should be using Firefox Aurora, Chrome or Safari 5 to see those demo.
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.
Developer Relations Team, long time jQuery contributor and Open Web enthusiast. @louis_remi