Mozilla

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.

Demos

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.

Credits

Creative Commons videos:

The multicolor cloud effect (MIT License)

61 comments

Comments are now closed.

  1. Rich wrote on July 27th, 2010 at 13:32:

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

    1. Paul Rouget wrote on July 27th, 2010 at 13:42:

      know bug. Thanks!

  2. Michaël wrote on July 27th, 2010 at 14:04:

    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 :)

  3. Magne Andersson wrote on July 27th, 2010 at 14:05:

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

  4. Michael Fienen wrote on July 27th, 2010 at 14:07:

    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.

    1. Rich wrote on July 27th, 2010 at 14:27:

      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.

    2. Matt Wiebe wrote on July 27th, 2010 at 21:54:

      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.

    3. Craig wrote on October 9th, 2010 at 00:00:

      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?

  5. Rich wrote on July 27th, 2010 at 14:28:

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

  6. Ege Özcan wrote on July 27th, 2010 at 15:00:

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

  7. Adam Luikart wrote on July 27th, 2010 at 15:50:

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

  8. Tim Dawson wrote on July 27th, 2010 at 15:59:

    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!

    1. Paul Rouget wrote on July 28th, 2010 at 07:34:

      Known bug. Thanks

  9. factlicker wrote on July 27th, 2010 at 16:14:

    Michael Fienen is out of touch.

  10. Rick wrote on July 27th, 2010 at 16:42:

    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.

  11. J.B. Nicholson-Owens wrote on July 27th, 2010 at 18:50:

    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?

    1. Paul Rouget wrote on July 28th, 2010 at 03:42:

      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: http://demos.hacks.mozilla.org/openweb/videos/transitions-demos.ogv

  12. Seth wrote on July 27th, 2010 at 21:01:

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

    1. Josh wrote on July 28th, 2010 at 03:04:

      I assume that’s a typo.

    2. Paul Rouget wrote on July 28th, 2010 at 03:26:

      FIxed! Thanks.

  13. Den wrote on July 28th, 2010 at 02:49:

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

  14. Max wrote on July 28th, 2010 at 05:13:

    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?

    1. Paul Rouget wrote on July 28th, 2010 at 07:35:

      not now.

  15. Komrade Killjoy wrote on July 28th, 2010 at 05:45:

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

  16. Komrade Killjoy wrote on July 28th, 2010 at 05:50:

    sweet, more ways to BURN cpu cycles

    thanks?

    1. Paul Rouget wrote on July 28th, 2010 at 07:36:

      GPU cycles :)

  17. Cristóferson Bueno wrote on July 28th, 2010 at 06:09:

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

    Thanks.

    1. Paul Rouget wrote on July 28th, 2010 at 07:36:

      I’m working on it, stay tuned

      1. Bruno simioni wrote on November 16th, 2010 at 06:34:

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

      2. Roger Erens wrote on January 20th, 2011 at 16:48:

        Hi Paul,

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

  18. Mark Curtis wrote on July 28th, 2010 at 06:39:

    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.

    1. Daniel84 wrote on July 28th, 2010 at 08:13:

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

    2. voracity wrote on July 28th, 2010 at 23:13:

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

      1. wrote on August 1st, 2010 at 14:22:

        There’s no way to blur the timing functions so they look more “natural”?

  19. Daniel Hendrycks wrote on July 28th, 2010 at 07:44:

    Hi, will we see JagerMonkey this fall?

    1. Christopher Blizzard wrote on August 15th, 2010 at 10:57:

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

  20. suganda wrote on July 28th, 2010 at 08:57:

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

  21. Bart K. wrote on July 28th, 2010 at 10:14:

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

  22. Chris wrote on July 28th, 2010 at 14:25:

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

  23. discoleo wrote on July 28th, 2010 at 14:30:

    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.

  24. discoleo wrote on July 28th, 2010 at 14:31:

    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.

    1. Paul Rouget wrote on July 29th, 2010 at 01:56:

      Know bug. Thanks.

  25. Victor wrote on July 29th, 2010 at 10:20:

    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!!!

  26. mathis the aznas owner wrote on July 29th, 2010 at 16:18:

    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

  27. Anthony Calzadilla wrote on July 29th, 2010 at 21:59:

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

    1. Christopher Blizzard wrote on August 15th, 2010 at 11:00:

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

  28. Komrade Killjoy wrote on July 29th, 2010 at 23:17:

    @Paul

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

  29. nemo wrote on July 30th, 2010 at 11:48:

    @Anthony
    https://bugzilla.mozilla.org/show_bug.cgi?id=231179
    https://bugzilla.mozilla.org/show_bug.cgi?id=506826 (similar and cooler IMO)

    https://developer.mozilla.org/en/Firefox_4_for_developers#Graphics_and_video

  30. Ingo Rautenberg wrote on July 30th, 2010 at 13:56:

    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

  31. Peter Geil wrote on July 31st, 2010 at 08:49:

    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!!

  32. Charles wrote on August 1st, 2010 at 15:20:

    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.

  33. Thiago wrote on August 25th, 2010 at 04:17:

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

  34. marc wrote on August 28th, 2010 at 20:47:

    I get wrong offset values after rotations, any workarounds?

  35. m wrote on October 15th, 2010 at 09:59:

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

  36. Gamal El-shal wrote on October 21st, 2010 at 10:46:

    I love Firefox

  37. Mark wrote on December 13th, 2010 at 08:20:

    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.

  38. thinsoldier wrote on December 22nd, 2010 at 13:54:

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

    This should behave the way it does in Webkit!

  39. quixote wrote on January 19th, 2011 at 13:24:

    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!

  40. evalica wrote on April 5th, 2011 at 11:00:

    a img {
    filter: url(#blackandwhite);
    }

    works like a charm.

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

  41. m lyakhovsky wrote on November 29th, 2012 at 11:36:

    http://jsfiddle.net/gdD8n/ none of the css3 elements work in firefox 18 why not

  42. m lyakhovsky wrote on November 29th, 2012 at 11:40:

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

Comments are closed for this article.