Paving the way towards smooth animations using CSS alone

Oct 27, 2011 09:24 GMT  ·  By

Mozilla has announced a rather exciting development, the latest Firefox 10 Nightly builds now support CSS 3D transformations. The feature had been supported by WebKit browsers, aka Google Chrome, for a while now, but Mozilla has joined the party as well.

As the name suggests, the feature enables developers to create 3D animations and transformations using nothing but CSS.

This greatly expands the capabilities of standard web technology, enabling devs to easily add 'special effects' to their site without resorting to Flash or to other more cumbersome ways.

"When the first 3D transformations in CSS got support on Webkit browsers people got incredibly excited about them," Mozilla's Chris Heilmann wrote.

"Now that they have matured we also support 3D CSS in Firefox. To see it for yourself, check out one of the latest nightly builds," he said.

Anyone that has started using CSS 3D transformations, even if it's for a demo, can now add support for Firefox as well. Since the tech is still in the early stages, each browser maker still requires devs to use custom code.

To use CSS 3D in Firefox, you have to add '-moz-transform-style: preserve-3d;' to your code. In fact, Mozilla wants you to, to start testing the new feature in the wild.

"This means now that we need your support in trying out CSS 3D examples in Firefox and add other extensions than -webkit- to your CSS 3D products and demos," Heilmann wrote.

Already, there are plenty of demos to try out the new feature, you just need to grab the Nightly version of Firefox. If you're using Chrome you can even do a side-by-side comparison.

It does seem that Mozilla's implementation is a bit slower and a bit rough around the edges, literally, at this point, but since this is just the initial support in the Nightly builds, things should improve considerably soon.

Photo Gallery (2 Images)

Firefox had some rendering errors, but performance is good
The tearing is due to the screenshot app, however the tiles have much roughter edges in Firefox compared to Chrome
Open gallery