-
201001 Aug
Mozilla announced the arrival of Firefox 4 Beta 2 late last week, only three weeks after the release of Beta 1. This updated release includes two major improvements over the first beta release, notably increased performance and increased support for CSS3 Transitions.
You can download the latest release here.
Increased Performance
Firefox 4 Beta 2 introduces a new page building mechanism: Retained Layers.
According to the Mozilla Hacks Blog:
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.
Increased Support for CSS3 Transitions
CSS3 Transitions, which allow developers to animate changes to CSS properties, were introduced to Firefox 4 in the previous beta release, however the second beta version now allows for the use of CSS3 Transitions on CSS3 Transforms (eg. scale, translate, skew).
Here’s a basic example taken from the Mozilla Hacks Blog:
See this box? Move your mouse over it, and its positiontransform: rotate(5deg);
will transformtransform: rotate(350deg) scale(1.4) rotate(-30deg);
through a smooth animation.
For those of you without the latest Beta, here’s a quick video of the effect in action.
More Demos
The Mozilla Hacks Blog also offers a few further demos of CSS3 Transitions on Transforms, although be warned that some of them are extremely slow loading, in some cases awkward to use, and one of them crashed the Firefox Beta completely.
Whilst this shows that there is still some way to go before such technologies can be used safely in mainstream projects, as you’d expect from a Beta version, it is still a great step in the right direction, and certainly puts further pressure on Microsoft who have only recently got to grips with border-radius. All in all, it’s certainly an exciting time to be a web developer.
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.
What about the Competition
Webkit based browsers, such as Safari and Chrome, and Opera already support CSS3 Transitions on CSS3 Transforms. IE remains the only sticking point, however effects will degrade gracefully.
Further Information
You can read more on the Mozilla Hacks Blog here, which includes a video overview by Paul Rouget (including screencasts of the above demonstrations), and download the beta release here.
You can skip to the end and leave a response.
-
Comments
-
01.
Great news, but Firefox is using too much CPU.
-
02.
I love’d this update!
Using it, and I really expect that the will fix this problem with CPU use, soon.
-
03.
Very good news!
Opera and Chrome is already support transition… still waiting IE9 ;) -
04.
-
05.
My sentiments exactly – Firefox seems to get slower with each new release. It’s almost as bad as IE in terms of performance.
-
06.
Opera is the best ….
What is the browser that supports 100% wc3 and CSS3?
Do not be blind!!
-
07.
@robson – Opera doesn’t have full support for CSS3, don’t be blind :-)
I can’t imagine any meaningful usage of transitions in practice, I’m not sure if they are important. But I’m glad to see Firefox getting quicker.
-
08.
http://www.mozilla.com/en-US/firefox/all-beta.htm…
http://www.mozilla.com/en-US/firefox/4.0b3/releas…
Firefox 4.0 Beta 3 is out.
-
09.
“I can’t imagine any meaningful usage of transitions in practice”
Really.
-
10.
“I can’t imagine any meaningful usage of transitions in practice”
then what about galleries and such things. or maybe for a mashup page? i see many uses.
-
11.
I tried jumping on the Opera bandwagon, but there are too many simple things that go wrong in the HTML/CSS. For instance, hover CSS styles on statically positioned HTML elements act up sometimes. Really long pre tags disappear sometimes. There is just a lot of goofy stuff that happens in Opera that no other browser struggles with.
-
12.
Is it possible to trigger an animation or transition, from another element? I’ve been surfing the web for examples, and could only find people talking about .thiselement and thiselement:hover ….
-
13.
-
14.
firefox is amazing but i usually hook up to windows explorer.
-
15.
Firefox is very best browser, but use much cache of RAM :):D
-
16.
-
01.