-
201101 Jun
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:animation-delayanimation-directionanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function
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
-webkit-prefix.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.
-
Comments
-
01.
I love CSS animations, as they are really really lightweight and bring a new wave of user experience to the world of web.
I’ve created a tutorial for it at CSS3 Animations and you can also have a look at css animations at My heart beats using latest version of Google Chrome. -
02.
Great news! With firefox, safari and chrome the most important browsers for my visitor will support it! Now its time for animation! ;o)
-
03.
Georges says:Comment » June 3rd, 2011 at 3:35 am
Coming from Flash, these animations are super basic, and extremely jittery & jumpy.
-
04.
@Georges: CSS animations tend to run faster & smoother than Flash on my old laptop.
-
05.
Is there a syntax for defining n number of animations in a single declaration? I’d really rather not have to do a lot of copy/pasting to keep webkit/moz/presto/official animations in sync.
-
06.
For example:
@-webkit-animation, @-moz-animation, @-o-animation, @animation {
…
}Is there any support for syntax like this?
-
07.
-
08.
-
09.
Flash can make it more better & easier. Without any script.
It’s just a basic start. That need long time to be better. -
10.
Great to see that Firefox are catching up with Chrome and Safari in terms of what they support in CSS3. Now all we have to do is see how long Microsoft take to do the same!
-
11.
My wife and I really loved reading your blog, I just want to know if your site is the industry’s article? We are trying to find people to trade time, just thought I would ask
-
12.
Wishing you the best of luck for all your blogging efforts.
Gucci Outlet
-
13.
@CyberSkull Try
@-webkit-keyframes name, @-moz-keyframes animation_name, @-o-keyframes animation_name, @-ms-keyframes animation_name, @keyframes animation_name {}
Haven’t checked, but it could work.
-
14.
-
15.
-
16.
-
17.
What about Internet Explorer 8 & 9? I plan to incorporate animations in my web projects. Does anyone know?
-
18.
Thank you for sharing the great information about CSS animations …
-
19.
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?
-
20.
Wishing you the best of luck for all your blogging efforts.
-
21.
-
22.
-
23.
-
01.
