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.

About these ads
Tagged with: , ,

One Response

Subscribe to comments with RSS.

  1. benjaminplee said, on 11.02.09 at 7:43 pm

    I was curious if your link would include information on which Webkit based browsers support transformations but the following line left me even more confused:

    Not all CSS properties and JavaScript classes described in this book are not supported on all Safari platforms.

    Cool stuff though. Nice that they are included w/o needing an additional library.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.