SiteCrafting, Inc.
9 Feb
CSS Animations in WebKit
WebKit, the muscle behind both Safari and Google Chrome has recently added CSS animation support to its nightly build. While a long way from being supported in any widely used browser, this does give a bit of a preview for what we can expect in the future. It's hard to say whether these new animations will be widely adopted, and if they simply become the new "blink tags" of the modern web world.
CSS animations are applied using the concept of keyframes which is well known among other animation-oriented mediums. To better understand keyframes, imagine a timeline depicting the progress of an animation. To move a tag from point (x,y) to point (X,Y), you could apply a keyframe denoting the starting point, and another denoting the ending point. In the context of CSS, these keyframes would be specific styles applied at certain times during the animation. The browser would then be allowed to handle the actual execution of this animation.
CSS animations are applied using the concept of keyframes which is well known among other animation-oriented mediums. To better understand keyframes, imagine a timeline depicting the progress of an animation. To move a tag from point (x,y) to point (X,Y), you could apply a keyframe denoting the starting point, and another denoting the ending point. In the context of CSS, these keyframes would be specific styles applied at certain times during the animation. The browser would then be allowed to handle the actual execution of this animation.
CSS, Javascript, XHTML
by Nick Williams | 2/9/2009 10:00am | Comments (2)
by Nick Williams | 2/9/2009 10:00am | Comments (2)
While I've glad animation is becoming standardized, and getting the ability to have native optimizations, is CSS really the place to be doing this? I know CSS is for the presentation of data, but it seems like it is better for handling the static presentation of data. Personally, I wouldn't mind if the "keyframes" were separate CSS declarations with JavaScript timers aiding the transition. That seems to be a stronger, more powerful approach. </rant>
Left by Paul Sayre | Feb 9, 2009
That's been my thought too, it seems like this is what JS is for. Why bother implementing this into CSS if it is already being done (and done well) in JavaScript? I suppose there are probably reasons I haven't thought of, but right now I'm not so sure.
Left by Nick Williams | Feb 9, 2009