CSS3

  • 201001 Aug

    Firefox 4 Beta 2 Brings Increased Support for CSS3 Transitions

    by

    Posted in Browsers, News

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

    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.

    demo thumbnailThis 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).
    demo thumbnailThis 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.
    demo thumbnailThis 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

Subscribe to our RSS

OUR SPONSORS

Advertise here?
CATEGORIES
FRIENDS
META2
TAG CLOUD

© 2009-2012 WEBFLUX. All Rights Reserved.