Life of Andrew

I have been trying out the new nightly builds of WebKit, the open HTML rendering engine that powers Safari and a small host of other browsers. WebKit’s claim to fame has always been its speed and relative lack of bloat, but it is starting to get some quite interesting features.

This entry talks about (and demonstrates) two of these news features – Animations and Transforms.

Transforms are something I have wanted for a while – the ability to arbitrary apply transformations to any HTML element. All the standard operations are supported – scale (in both dimensions), rotate, translate, and skew, and you can even supply your own matrix. Only 2d transforms are supported; there is no way to specify perspective. This is a shame (your Javascript Quake engine will have to wait) but I think they have made affine start.

One potential problem is that transforms do not affect layout at all – elements can be scaled and rotated around by the layout of the document stays the same. I can see why it is implemented this way, but it would be nice to see text flowing around rotated picture, for example.

Animations are ways of specifying how the look of an element changes over time. Usually, when the style of an element changes (via :hover or Javascript), the change happens instantaneously. Animations allow the transition to happen smoothly over a user-defined time period. Up to now this has been accomplished with nasty Javascript hacks; the animation spec implemented in WebKit looks flexible enough to replace all that with clean CSS.

Anyway, you may not have noticed but this document is a live demonstration of these new features. If you are using a recent nightly build of WebKit (on either MacOSX or Windows), you can click on any part of this document to see a Transform being smoothly Animated.