Posts Tagged ‘CSS transitions’

This article provides a brief history of the revolution brought by Webkit in web graphics. There is to note that CSS transforms and transitions, that appeared in WebKit in 2007, only supported GPU accelerating in the iPhone WebKit version (through Core Animation).
Google developed its own compositing engine for Chrome, Skia, inspired from OSX’s CoreGraphics, for Canvas 2D implementation under Windows and Linux (on OSX Google logically uses CoreGraphics). These two implementations do not manage yet GPU accelerating (Google would have to use CoreGraphics’s CGLayer on OSX for that), however Canvas 2D performance on Chrome under OSX is still ways behind Windows and Linux versions (that isn’t the case for CSS transitions/animations, based on CoreAnimation’s CALayer – and then the GPU).

Quartz has been using GPU accelerating for windows moving since first version of OSX, however content redraw (areas selection) was never optimized (for example text reflow when resizing a window) and is still mainly software based. QuartzGL (that was released in Leopard and that was initially available under Tiger under Quartz Extreme name) was intended to solve this problem, however it is still disabled by default (could lead to visual artifacts, and Apple is still working on resolution independance, that is tied).

The site provides examples that use CSS transforms (require Safari 4 beta or Firefox 3.5) : 3D Cube using CSS transformations. We can also find examples that use CSS transitions from WebKit (Safari 4 or Chrome) : Auto-scrolling Parallax Effect without JavaScript, An analogue clock using only CSS.