By
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.
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:
- Ian Broyles
- Spoony Mushroom
- Mark Sebastian: [1] [2]
- Swanky
- Spiral Production
The multicolor cloud effect (MIT License)
About Paul Rouget
Paul is a Firefox developer.
61 comments