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.
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 position
transform: rotate(5deg);will transform
transform: 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.
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.
You can skip to the end and leave a response.
Great news, but Firefox is using too much CPU.
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.