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.