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.

View full post on Mozilla Hacks – the Web developer blog

Tagged on: , , ,

4 thoughts on “Rofox, a CSS3 Animations demo

  1. 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.

Leave a Reply