Apple unveiled CSS Animation, stil available in latest versions (nightly builds) of WebKit and iPhone’s Safari (since OS 2.1). These animations are of explicit type, can be repeated, and keyframes can be defined. Three examples are provided.
Available animated properties are common CSS attributes : position (left, right, top, bottom), background-color, opacity, etc. We can also manage transforms animating (CSS Transforms) : scale, rotate. Then transforms happen as transitions. In the same manner we can create gradients and masks. All thse CSS extensions are parts of the CSS Effects project.
We define properties to animate (their initial and final values) through a CSS style, and we set/trigger the animation (reference to previously declared CSS Animation name, animating duration, iterations and direction) by fixing properties on a div, or on a second CSS. Keyframes can be defined by declaring many properties groups entries for the CSS Animation (with a prepended percent for each, that specify the frame position in the timeline, relative to the transition duration).
Moreover the iPhone Safari contains optimizations : accelerated animations and transforms, including 3d(not yet included in the desktop WebKit version). Examples are available at the iPhone Dev Center (registration required), notably Poster Circle, Card Flip, Finger Tips and Simple Browser.
Apple also provides Javascript/CSSOM interfaces for deeper control of animations (programmatically adjust the keyframes in an animation, or get the current transformation of a node), but they seem less documented.
All that is close to what we can do with the CoreAnimation implementation available in Cappuccino (partial, only manages explicit animations – no implicit ones -, the same as with CSS Animations, but apparently without acceleration). In an Ajaxian article about CSS Animations, we can read the following comment : Having animation directly in the browser will always be faster than using JS for every frame. With CSS animation, JS could just handle keyframes. It seems that Cappuccino goes in the same way, but perhaps for now only WebKit has hooks to access to graphic card acceleration for computed frames. That principle is however dealed with in a Cappuccino presentation – The Road to Cappuccino with Francisco Tolmasky– (36′) : Graphics, no DOM, card_do(), DOM (W3C DOM/IE DOM) or CSS (CSS/IE CSS) or Canvas (Canvas/VML). Some also expect work on the SVG side.
We can discover a last example of CoverFlow like animation (zflow) on iPhone Safari, that uses CSS Visual Effects extensions (hardware accelerated on the iPhone) : 3D CSS transforms, CSS Transitions, use of Canvas (available in WebKit/iPhone Safari implementation of HTML 5) to simulate reflections.
UPDATE : here is the answer about the graphics technology used by Cappuccino for Core Animation (depends from the browser), and later use of CSS Animation and transforms :
This is the plan, but it is not yet implemented. Currently, CA in Cappuccino uses Canvas in Safari/Firefox/Opera and VML in IE to achieve transforms. However, it would be much more desirable to use the built in CSS transforms when supported. We would also like to do the same with animations: using timer-based animation in IE/Firefox but CSS “server” based animations in Safari. Unfortunately we simply haven’t gotten around to take on this pretty daunting task.
We can read a Canvas’s presentation, reactions and complaints about Apple not supporting SVG instead.
Cjed Audio 