CSS Animations in WebKit
See what's new in the latest build...
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.
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 at SC | Feb. 9, 2009 at 10:27am
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 at SC | Feb. 9, 2009 at 10:29am
Leave a Comment