Released on Friday 20th May 2011, Firefox 5 beta brings long awaited support for the CSS3 Animations module, released as a W3C working draft in March 2009, to Mozilla’s popular web browser.
The following properties are supported, although you’ll have to use the
-moz-prefix for the time being:
CSS3 Animations have already been supported by Webkit based browsers (eg. Safari/Chrome) for over two years, since February 2009, although as with Firefox a prefix is required, in this case the
For a great demonstraion of what can be achieved using CSS3 Animations, check out Anthony Calzadilla, Andy Clarke and Geri Coady’s Madmanimation demo (works in both the Firefox beta and current versions of Safari/Chrome). There’s also some basic examples on the Mozilla Hacks Blog here and Paul Rouget has ‘hacked’ Anthony Cadzadilla’s famous CSS3 AT-AT demo to work in Firefox here.
You can find full details of CSS3 Animations support in Firefox 5 on the Mozilla Developer Network, and details of CSS3 Animations support in Webkit can be found on the Webkit blog. To date Webkit and Firefox are the only browsers to have implemented CSS3 Animations.
You can download Firefox 5 beta here and further details on the other improvements in Firefox 5, including improved standards support for HTML5, XHR, MathML, SMIL, and canvas, can be found in the release notes.
You can skip to the end and leave a response.
Awesome Madmen animation! Does anyone know if it’s possible to drag and drop an img within a div that is on a motion tween? (I have a css looping animation of clouds moving across the window and i want to be able to drag and drop them) so far i’ve been able to get the drag/drop and the css animation working separately, just not at the same time for one div. Any ideas?