Mozilla

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 {
  /* ARM  SLIDING OUT FROM BODY */
  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: www.anthonycalzadilla.com. And feel free to submit your CSS3 Animations demos to the Mozilla Demo Studio.

6 comments

Comments are now closed.

  1. Jason wrote on June 27th, 2011 at 19:48:

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

  2. Nigel wrote on July 1st, 2011 at 04:36:

    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.

  3. Gaurav Mishra wrote on July 3rd, 2011 at 23:44:

    YAY! CSS3

  4. wangmeng wrote on July 5th, 2011 at 19:24:

    i like

  5. Chico Web Design wrote on August 29th, 2011 at 16:25:

    Great animation! CSS3 makes it look great.

  6. Mark wrote on March 21st, 2012 at 09:04:

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

Comments are closed for this article.