CSS3 Animations Support in Firefox 5 Beta

201101 Jun
CSS3 Animations Support in Firefox 5 Beta
by Chris
Posted in Browsers, News
Tweet

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-delay
- animation-direction
- animation-iteration-count
- animation-name
- animation-play-state
- animation-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.
  
  Saeed Neamati says:Comment » June 2nd, 2011 at 1:54 pm
  
  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.
  
  Webstandard-Blog says:Comment » June 2nd, 2011 at 8:54 pm
  
  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.
  
  CyberSkull says:Comment » June 5th, 2011 at 3:32 am
  
  @Georges: CSS animations tend to run faster & smoother than Flash on my old laptop.
- 05.
  
  CyberSkull says:Comment » June 6th, 2011 at 4:39 am
  
  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.
  
  CyberSkull says:Comment » June 6th, 2011 at 4:42 am
  
  For example:
  
  @-webkit-animation, @-moz-animation, @-o-animation, @animation {
  …
  }
  
  Is there any support for syntax like this?
- 07.
  
  Alexey says:Comment » June 6th, 2011 at 7:54 am
  
  cool! i will try it!
- 08.
  
  Sinac says:Comment » June 9th, 2011 at 9:49 pm
  
  it’s great , beautiful
- 09.
  
  Farzad says:Comment » June 16th, 2011 at 1:01 pm
  
  Flash can make it more better & easier. Without any script.
  It’s just a basic start. That need long time to be better.
- 10.
  
  Johnathan says:Comment » July 9th, 2011 at 10:27 pm
  
  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.
  
  SUN says:Comment » July 26th, 2011 at 4:34 am
  
  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.
  
  SUN says:Comment » July 27th, 2011 at 2:42 am
  
  Wishing you the best of luck for all your blogging efforts.
  
  Gucci Outlet
- 13.
  
  Sinokle says:Comment » August 21st, 2011 at 4:58 pm
  
  @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.
  
  cayun says:Comment » August 30th, 2011 at 5:53 pm
  
  It’s very beautiful, thanks
- 15.
  
  nhl jersey says:Comment » October 27th, 2011 at 4:56 pm
  
  I like it very much!so good!
- 16.
  
  颂赞 says:Comment » November 8th, 2011 at 6:20 pm
  
  thanks
- 17.
  
  Lee says:Comment » January 18th, 2012 at 1:19 pm
  
  What about Internet Explorer 8 & 9? I plan to incorporate animations in my web projects. Does anyone know?
- 18.
  
  Alina Erin says:Comment » January 25th, 2012 at 5:31 pm
  
  Thank you for sharing the great information about CSS animations …
- 19.
  
  Ryan says:Comment » March 21st, 2012 at 3:20 am
  
  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?

Subscribe to our RSS

CATEGORIES

FRIENDS

Meta

Hosting by:

CSS3

Comments

Leave a Comment