On WebKit fanciness.
WebKit is kicking ass. It’s getting more use: First the iPhone, and now Android. More attention from the bloggers. Amazing downloadable font support. Futuristic HTML5 features: Clientside database storage, along with a slick query browser, as well as sophisticated media embedding and controlling.
But what’s got me most excited is how the WebKit team is pushing CSS out of its rut. In the past few weeks they’ve implemented a group of related features allowing for powerful CSS-based display manipulation.
Before I get into any details, just take a look at the following examples. (Of course, to see them properly, you’ll need a recent WebKit nightly build.) And be sure you hover over the paragraphs.
Testing this newfangled fanciness.
This one is scaled by 2.
This one is translated by 5em.
This one is rotated by 45°.
This one is skewed by 0, -45°.
In case you can’t see what’s going on here – and you really should check this out; it’s only a download away – all but the first paragraph are transformed, in the manners described. But the best part is that when you hover over a paragraph the transformation is removed, in a 1 second long animation. (The colors reverse too, just for kicks.)
This is accomplished through two extensions to CSS: -webkit-transform and -webkit-transition. The -webkit-transform property allows you to transform your objects, and -webkit-transition allows you to animate any CSS display property. Dave Hyatt described it thus:
The simplest kind of animation that we’ve added support for is called a transition. Normally when the value of a CSS property changes, the rendered result is instantly updated, with the element in question changing immediately from the old property value to the new property value. Transitions describe how to instead execute an animation from the old state to the new state over time.
That’s hot.
-webkit-transform takes a type of transformation – scale, rotate, translate, or skew – and a value, in parentheses. scale takes a unit-less value, like -webkit-transform: scale(2); rotate takes one CSS angle, and skew takes two, like -webkit-transform: rotate(45deg); and translate takes a length or percentage, like -webkit-transform: translate(5em).
(There’s also matrix, which allows you to “specify a full affine transform matrix”, and takes six values. I’ll be damned if I can get it to work though. So perhaps more on that another time.)
-webkit-transition allows you to specify a property, a duration, and a timing function. The property can be none, all, or the name of a specific property, like color, position, or -webkit-transform. The duration is a time in seconds, like 2s. The timing function can be the default, linear, ease-in, ease-out, ease-in-out, or your can specify your own cubic bezier function with cubic-bezier(x1, y1, x2, y2). In the examples above, I’ve specified -webkit-transition: all 1s ease-in-out.
There are clearly some kinks to be worked out. Just in the super simple examples above you can see that I had to set a different opacity value for the translated paragraph, and that the side borders of the rotated paragraph seem to have vanished. But it’s a hell of a start.
And it seems that these simple transforms and transitions are only the first of a range of visual effects that WebKit is adding to CSS. I’m looking forward to seeing what else they implement.
For more information, check out Hyatt’s two posts on Surfing Safari: CSS Transforms and CSS Animation.