Rofox, a CSS3 Animations demo

Firefox 5 was released last week. This release comes with CSS3 Animations. Here is a demo made by Anthony Calzadilla.

To illustrate what you can achieve with CSS3 Animations, we have been working on demo with Anthony Calzadilla (@acalzadilla), famous for his awesome Animation projects.

Check out the demo on the Mozilla Demo Studio.

And it works on Firefox Mobile too:

The whole animation is orchestrated in CSS (keyframe) and the moves are animated transformations (transforms). The images are nested divs. If you translated a div and rotate its child, the transformations are combined. You can see the elements being transformed (bounding boxes) if you activate the debug mode.

#arm-rt {
  transform-origin: 0 50%;
  /* The syntax is:
   animation: name duration timing-function delay count direction
  animation: arm-rt-action-01 60s ease-out 10s 1 both;
@keyframes arm-rt-action-01 {
  /* This part of the animation starts after 10s and lasts for 60s */
  0% { transform : translate(-100px,0) rotate(0deg); }
  5% { transform : translate(0,0) rotate(0deg); }
  6% { transform : translate(0,0) rotate(-16deg); }
  21% { transform : translate(0,0) rotate(-16deg); }
  22% { transform : translate(-100px,0) rotate(0deg); }
  100% { transform : translate(-100px,0) rotate(0deg); }

Tip: If you want to avoid some performance issues, we encourage you to use bitmap images. SVG images can make the animation a bit shoppy.

Want to see more CSS3 Animations? Check out Anthony’s website: And feel free to submit your CSS3 Animations demos to the Mozilla Demo Studio.

About Paul Rouget

Paul is a Firefox developer.

More articles by Paul Rouget…


  1. Jason

    Wow, that’s fantastic. Amazing what can be done with CSS3!

    June 27th, 2011 at 19:48
  2. Nigel

    That is truly superb, like Jason says it is amazing what can be done in the hands of an expert using CSS3.

    Thank you for doing it.

    July 1st, 2011 at 04:36
  3. Gaurav Mishra

    YAY! CSS3

    July 3rd, 2011 at 23:44
  4. wangmeng

    i like

    July 5th, 2011 at 19:24
  5. Chico Web Design

    Great animation! CSS3 makes it look great.

    August 29th, 2011 at 16:25
  6. Mark

    Awesome work. I’m really impressed at how well it works on the droid. It must have taken a while to do. Thanks.

    March 21st, 2012 at 09:04

Comments are closed for this article.