Two Guys Arguing

Webkit CSS Transitions

Posted in css by youngnh on 11.02.09

The iPhone’s Safari browser has a few tricks up it’s sleeve to make web apps feel more like native ones

In contrast to Javascript-controlled animation frameworks like Scriptaculous, the iPhone’s Webkit browser is capable of animations that utilize the native hardware.

How to do this was a bit confusing to me at first, but there are really only 2 and a half steps:

1. “Observe” the properties whose changes you’d like to animate by listing them in a comma-delimited value of -webkit-transition-property
1.5 (Specify an animation duration via -webkit-transition-duration)

div {
  -webkit-transition-property: opacity, background-color;
  -webkit-transition-duration: 1.5s;
}

and

2. Change the property (maybe in Javascript in response to an event)

function handleEvent(event) {
    event.currentTarget.style.opacity = 0.0;
    event.currentTarget.style.backgroundColor = 'blue';
}

and instead of instantly re-rendering the element with the new style, Webkit will transition the "observed" CSS properties from their original values to their newly set ones over the duration you specified.

I don't usually even bother writing the observation code in my stylesheets, either, as jQuery makes it dead simple for whatever DOM object I've currently got a reference to:

$(anelement).css("-webkit-transition-property", "opacity, background-color")
            .css("-webkit-transition-duration", "1.5s");

What makes this cool and powerful is that the iPhone's browser defines an extra CSS property, -webkit-transform, which describes full 3D transformations that can be applied to page elements. Animated transitions can observe this property just like any other CSS property and very nifty, fully 3D, and natively optimized animations can be created with a fraction of the code a native app utilizing OpenGL might have to write.

Apple published this guide with more detailed information on all of the visual effects that Safari supports.

Tagged with: , ,
Follow

Get every new post delivered to your Inbox.