Firefox 4 Beta 2 is here – Welcome CSS3 transitions

As we have explained before, Mozilla is now making more frequent updates to our beta program. So here it is, Firefox Beta 2 has just been released, 3 weeks after Beta 1.

Firefox 4 Beta 1 already brought a large amount of new features (see the Beta 1 feature list). So what’s new for web developers in this beta?

Performance & CSS3 Transitions

The two major features for web developers with this release are Performance improvements and CSS3 Transitions on CSS3 Transforms.

This video is hosted by Youtube and uses the HTML5 video tag if you have enabled it (see here). Youtube video here.

Performance: In this new Beta, Firefox comes with a new page building mechanism: Retained Layers. This mechanism provides noticeable faster speed for web pages with dynamic content, and scrolling is much smoother. Also, we’re still experimenting with hardware acceleration: using the GPU to render and build some parts of the web page.

CSS3 Transitions on transforms: The major change for web developers is probably CSS3 Transitions on CSS3 Transformations.

CSS3 Transitions provide a way to animate changes to CSS properties, instead of having the changes take effect instantly. See the documentation for details.

This feature was available in Firefox 4 Beta 1, but in this new Beta, you can use Transitions on Transformation.

A CSS3 Transformation allows you to define a Transformation (scale, translate, skew) on any HTML element. And you can animate this transformation with the transitions.

See this box? Move your mouse over it, and its position transform: rotate(5deg); will transform transform: rotate(350deg) scale(1.4) rotate(-30deg); through a smooth animation.
#victim {
  background-color: yellow;
  color: black;
  transition-duration: 1s;
  transform: rotate(10deg);
  /* Prefixes */
  -moz-transition-duration: 1s;
  -moz-transform: rotate(5deg);
  -webkit-transition-duration: 1s;
  -webkit-transform: rotate(10deg);
  -o-transition-duration: 1s;
  -o-transform: rotate(10deg);
#victim:hover {
  background-color: red;
  color: white;
  transform:  rotate(350deg) scale(1.4) rotate(-30deg);
  /* Prefixes */
  -moz-transform:  rotate(350deg) scale(1.4) rotate(-30deg);
  -webkit-transform:  rotate(350deg) scale(1.4) rotate(-30deg);
  -o-transform:  rotate(350deg) scale(1.4) rotate(-30deg);

CSS 3 Transitions are supported by Webkit-based browsers (Safari and Chrome), Opera and now Firefox as well. Degradation (if not supported) is graceful (no animation, but the style is still applied). Therefore, you can start using it right away.


I’ve written a couple of demos to show both CSS3 Transitions on Transforms and hardware acceleration (See the video above for screencasts).

This demo shows 5 videos. The videos are Black&White in the thumbnails (using a SVG Filter) and colorful when real size (click on them). The “whirly” effect is done with CSS Transitions. Move you mouse over the video, you’ll see a question mark (?) button. Click on it to have the details about the video and to see another SVG Filter applied (feGaussianBlur).
This page shows 2 videos. The top left video is a round video (thanks to SVG clip-path) with SVG controls. The main video is clickable (magnifies the video). The text on top of the video is clickable as well, to send it to the background using CSS Transitions.
This page is a simple list of images, video and canvas elements. Clicking on an element will apply a CSS Transform to the page itself with a transition. White elements are clickable (play video or bring a WebGL object). I encourage you to use a hardware accelerated and a WebGL capable browser. For Firefox on Windows, you should enable Direct2D.


Creative Commons videos:

The multicolor cloud effect (MIT License)

About Paul Rouget

Paul is a Firefox developer.

More articles by Paul Rouget…


  1. Rich

    Seems there are a few bugs when transitioning transforms on text – take a look at the first example here: – seems that the width that the text fills isn’t recalculated correctly causing the text to reflow at different angles.

    July 27th, 2010 at 13:32
    1. Paul Rouget

      know bug. Thanks!

      July 27th, 2010 at 13:42
  2. Michaël

    Amazing demos, as usual!

    Maybe I’m asking for too much but can we expect to see CSS transitions on CSS gradients in a future beta? We can already make pretty nice effects with CSS transitions on a background-color and a partially transparent CSS gradient as a background-image (using rgba()) but having “real” transitions on CSS gradients would transform this awesome feature into an über-awesome one :)

    July 27th, 2010 at 14:04
  3. Magne Andersson

    They appear hopelessly slow on platforms without hardware acceleration, unfortunately :/

    July 27th, 2010 at 14:05
  4. Michael Fienen

    So, for no good reason, they decided to implement this feature, but do it by forking yet another CSS feature with a custom prefixed attribute? DO NOT WANT. Seriously, just implement the native CSS3 attributes. I don’t want to write the same code 4 times for browsers.

    July 27th, 2010 at 14:07
    1. Rich

      Whilst the feature doesn’t have parity across browsers, using vendor prefixes is absolutely the correct behaviour, otherwise it becomes hell to ensure that your code provides good results in each browser.

      Use a CSS preprocessor such as compass or scaffold to define mixins if you can’t be bothered with multiple similar declarations, or just wait until it’s a stable feature in all browsers before using it.

      July 27th, 2010 at 14:27
    2. Matt Wiebe

      Michael, there is an excellent reason for using a prefix, and I’m happy that they are. Read Eric Meyer’s article Prefix or Posthack if you’re not aware of these reasons.

      July 27th, 2010 at 21:54
    3. Craig

      That’s a shame because no one gives a fuck what you WANT! Read the spec and learn why people are doing it and then come back here an apologise for being such an intense retard. Do you really think you know better than Mozilla, Google, Microsoft and every other corporation with an interest in the web?

      “DO NOT WANT”? How old are you, 6?

      October 9th, 2010 at 00:00
  5. Rich

    Seems Implementing transitions is harder than it sounds, seen lots of bugs in all browsers regard various parts.

    July 27th, 2010 at 14:28
  6. Ege Özcan

    These look amazingly promising. Thanks for taking all the trouble for preparing these demos. Not just technically wonderful, but also very creative and inspiring.

    July 27th, 2010 at 15:00
  7. Adam Luikart

    This averts the nightmare scenario of having to somehow feature-detect a CSS transition engine that didn’t support transitions on transforms. Thank you.

    July 27th, 2010 at 15:50
  8. Tim Dawson

    The implementation demo’d on this page appears a bit buggy in 4.0b2,
    the sans serif font appears to not be rotating with the box, but staying upright. Great to see this being added, hopefully 3d space transitions will follow soon!

    July 27th, 2010 at 15:59
    1. Paul Rouget

      Known bug. Thanks

      July 28th, 2010 at 07:34
  9. factlicker

    Michael Fienen is out of touch.

    July 27th, 2010 at 16:14
  10. Rick

    Cool! New css stuff!!

    Too bad the automatic update failed. I got errors finding an entry point in kernel.dll. (windows 2000)
    And the full installer I downloaded was corrupt.
    And the update server is slower than molasses in january.

    Oh well. I’ll try again tomorrow.

    July 27th, 2010 at 16:42
  11. J.B. Nicholson-Owens

    Where can people get a copy of the video in WebM format? YouTube doesn’t appear to offer this video in formats 43 or 45 (the only two WebM YouTube format codes I know of).

    It would be nice to use the formats Mozilla is eager to promote, no?

    July 27th, 2010 at 18:50
    1. Paul Rouget

      If you active the HTML5 Beta feature, it’s WebM. I don’t think you can easily download the file from youtube.

      You can download the OGG/Theora version here:

      July 28th, 2010 at 03:42
  12. Seth

    Why does the FF example have a different -moz-transform: rotate(5deg); value than the rest?

    July 27th, 2010 at 21:01
    1. Josh

      I assume that’s a typo.

      July 28th, 2010 at 03:04
    2. Paul Rouget

      FIxed! Thanks.

      July 28th, 2010 at 03:26
  13. Den

    I wonder why jquery animations are so screw’d up :((

    July 28th, 2010 at 02:49
  14. Max

    love the demo! awesome stuff!
    however it seems that christian(?) is interrupting you a few times, which is somewhat confusing. anyway i like the format i.e. seeing you talking about features and showing them on the monitor next to you.

    oh and the performance of ff on the mac is pretty bad. is hardware acceleration not available for the apple platform?

    July 28th, 2010 at 05:13
    1. Paul Rouget

      not now.

      July 28th, 2010 at 07:35
  15. Komrade Killjoy

    how many new ways will firefox have to steal focus from the user now?

    July 28th, 2010 at 05:45
  16. Komrade Killjoy

    sweet, more ways to BURN cpu cycles


    July 28th, 2010 at 05:50
    1. Paul Rouget

      GPU cycles :)

      July 28th, 2010 at 07:36
  17. Cristóferson Bueno

    Hi. I wondering if is possible you to share the slides and WebSocket remote control sources codes.


    July 28th, 2010 at 06:09
    1. Paul Rouget

      I’m working on it, stay tuned

      July 28th, 2010 at 07:36
      1. Bruno simioni

        Any updates/code about server-side websocket in this example?

        November 16th, 2010 at 06:34
      2. Roger Erens

        Hi Paul,

        If you’d get around sharing your code, I think this would still be interesting to many of us.

        January 20th, 2011 at 16:48
  18. Mark Curtis

    Slight bug with that rotation:
    1. Hover over it so it rotates
    2. Put the cursor over the ‘n’ in animation
    3. Move the cursor to the right until it is just outside the red box
    4. Watch the box spasm

    This does not happen in the latest versions of Chrome, Opera or Safari.

    July 28th, 2010 at 06:39
    1. Daniel84

      Looks like animation is canceled, because through the rotation hover event is called again

      July 28th, 2010 at 08:13
    2. voracity

      As strange as that spasming is, I’d argue that’s the right behaviour — unless the spec deals with transitions causing feedback loops?

      July 28th, 2010 at 23:13
      1. There’s no way to blur the timing functions so they look more “natural”?

        August 1st, 2010 at 14:22
  19. Daniel Hendrycks

    Hi, will we see JagerMonkey this fall?

    July 28th, 2010 at 07:44
    1. Christopher Blizzard

      Yep! It’s in process, but it should be fully landed this fall before we ship Firefox 4.

      August 15th, 2010 at 10:57
  20. suganda

    I strongly support the firefox forever, because I always use firefox while browsing.

    July 28th, 2010 at 08:57
  21. Bart K.

    I’m running Fedora 13 on a machine with an Nvidia card. Is there some way I can enable hardware acceleration?

    July 28th, 2010 at 10:14
  22. Chris

    Hi, I’m in the video, I’m a popular Asian now, kkthxbai.

    July 28th, 2010 at 14:25
  23. discoleo

    I cannot start it on Win2k.

    Error message: The procedure entry point TrlCaptureContext could not be located in the dynamic link library kernel32.dll.

    I hope this gets fiexed soon.

    July 28th, 2010 at 14:30
  24. discoleo

    I cannot start it on Win2k. [corrected: *Rtl*]

    Error message: The procedure entry point RtlCaptureContext could not be located in the dynamic link library kernel32.dll.

    I hope this gets fiexed soon.

    July 28th, 2010 at 14:31
    1. Paul Rouget

      Know bug. Thanks.

      July 29th, 2010 at 01:56
  25. Victor

    I’m having the same problem discoleo is having.
    Also note I am having problems with
    shockwave crashing my firefox.
    Something to do with not creating a
    cache dump file when having anything
    to do with flash applications.
    Please HELP!!!

    July 29th, 2010 at 10:20
  26. mathis the aznas owner

    i am also getting error in win2k..hope it would be fixed soon
    anyways nice work from the firefox team :)
    but i cannt use it due to the problem :(
    help me out

    July 29th, 2010 at 16:18
  27. Anthony Calzadilla

    This is so great. Will mozilla ever support @keyframe animation? ALso, how about svg files as css background images?

    July 29th, 2010 at 21:59
    1. Christopher Blizzard

      SVG files as CSS backgrounds is on track for Firefox 4.

      August 15th, 2010 at 11:00
  28. Komrade Killjoy


    If no GPU support on a given workstation will CPU cycles continue to burn?

    July 29th, 2010 at 23:17
  29. nemo

    @Anthony (similar and cooler IMO)

    July 30th, 2010 at 11:48
  30. Ingo Rautenberg

    Also have the dll loading (or not loading) problem on Win2k computer with vers. 4 beta 2. Reverted back to functioning vers. 4 beta 1

    July 30th, 2010 at 13:56
  31. Peter Geil

    It would be great if there were an additional event property for “transitionend” that one could use to determine if the whole transition process is finished (i.e. all properties were trans’ed).

    However, great work so far!!

    July 31st, 2010 at 08:49
  32. Charles

    Firefox 4 Beta 1 – work in Windows 2000.
    Firefox 4 Beta 2 – not work in Windows 2000.
    Error message: The procedure entry point RtlCaptureContext could not be located in the dynamic link library kernel32.dll.

    August 1st, 2010 at 15:20
  33. Thiago

    Como sempre mazilla na frente em relação a html e CSS, Vlws mozilla

    August 25th, 2010 at 04:17
  34. marc

    I get wrong offset values after rotations, any workarounds?

    August 28th, 2010 at 20:47
  35. m

    with all this and webgl do we still have to have flash player to watch videos on youtube?

    October 15th, 2010 at 09:59
  36. Gamal El-shal

    I love Firefox

    October 21st, 2010 at 10:46
  37. Mark

    Love Firefox – wouldn’t think of using anything else! One thing bothers me though (I’m on 3.6.13)…What is up with images? They always seem slightly out of focus when compared with other browsers.

    December 13th, 2010 at 08:20
  38. thinsoldier

    “See this box? Move your mouse over it, and”… WATCH IT SPAZ OUT!

    This should behave the way it does in Webkit!

    December 22nd, 2010 at 13:54
  39. quixote

    A data point: I’m running FF 4.0b10 on Ubuntu (Maverick) on a core i7 CPU (Intel graphics, nothing dedicated), and it runs fine. There are a few places in the presentation demo where it lags a bit while my ISP’s bandwidth catches up, but that’s not css3’s fault. The transitions, videos, and the rest all run flawlessly.

    Now we just need a web where they can’t use this to make even-more-in-your-face ads. I just hope Wladimir Palant is on it!

    January 19th, 2011 at 13:24
  40. evalica

    a img {
    filter: url(#blackandwhite);

    works like a charm.

    a:visited img {
    filter: url(#blackandwhite);
    doesn’t work :(

    April 5th, 2011 at 11:00
  41. m lyakhovsky none of the css3 elements work in firefox 18 why not

    November 29th, 2012 at 11:36
  42. m lyakhovsky

    -webkit-border-radius: 25px;
    this should have been the simplest of them all except it doesn’t work

    November 29th, 2012 at 11:40

Comments are closed for this article.