Advanced animations in Aurora with CSS3 Animations

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…


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.

About louisremi

Developer Relations Team, long time jQuery contributor and Open Web enthusiast. @louis_remi

More articles by louisremi…


  1. Salman Abbas

    Awesome :D

    May 9th, 2011 at 12:25

  2. BrianMB

    This is a benchmark I put together for graphics performance in various Webkit browsers, which now works like a dream in Aurora.

    May 9th, 2011 at 13:41

  3. Girish Mony

    CSS3 animation seems to work well with Firefox 4.0.1. Check this demo

    If so what is new in Aurora, which I cannot play in Firefox 4?

    May 9th, 2011 at 19:42

    1. louisremi

      After looking at the sources, it appears that this is not strictly speaking CSS3 animations that are used on this web page.

      May 10th, 2011 at 06:11

      1. Girish Mony

        I thought of writing this as a post in my blog. So I thought to go deep in CSS3 animation and asked my doubt. Thanks for clarification

        May 10th, 2011 at 07:41

  4. Ken Saunders

    Freakin’ cool!

    May 10th, 2011 at 10:59

  5. Webstandard Blog

    Awesome an thx for making it possible!!!

    June 2nd, 2011 at 12:02

  6. Gaurav M

    Freaking on #FF

    June 21st, 2011 at 23:45

  7. 0dp

    very nice update works like a charm.
    big supporter of the less is more approach.

    July 24th, 2011 at 06:11

Comments are closed for this article.