Mozilla

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…

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.

Posted by on at

9 comments

Comments are now closed.

  1. Salman Abbas wrote on May 9th, 2011 at 12:25:

    Awesome :D

  2. BrianMB wrote on May 9th, 2011 at 13:41:

    http://www.analogysoft.com/things/tinywings/

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

  3. Girish Mony wrote on May 9th, 2011 at 19:42:

    CSS3 animation seems to work well with Firefox 4.0.1. Check this demo
    http://www.cssplay.co.uk/menu/css3-animation.html.

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

    1. louisremi wrote on May 10th, 2011 at 06:11:

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

      1. Girish Mony wrote on May 10th, 2011 at 07:41:

        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

  4. Ken Saunders wrote on May 10th, 2011 at 10:59:

    Freakin’ cool!

  5. Webstandard Blog wrote on June 2nd, 2011 at 12:02:

    Awesome an thx for making it possible!!!

  6. Gaurav M wrote on June 21st, 2011 at 23:45:

    Freaking on #FF

  7. 0dp wrote on July 24th, 2011 at 06:11:

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

Comments are closed for this article.