Animating the CSS Text Shadow Property

Just finished up with adding support for text shadow animation to the UIZE JavaScript Framework. I think you’ll find something interesting to look at here…

http://www.uize.com/examples/hover-fader-text-shadow-animation.html

I love the fact that Firefox 3.5x fully supports the text-shadow property. It's nice to see it in Google Chrome, Safari, and Opera, as well. Would be nice to get the IE folks on board. Performance seems to be best in Safari, so far. Chrome 3.0 seems to have some rendering issues with text shadow: not quite as smooth as it could be, and there appears to be some interaction between the shadow and the text above it. Nevertheless, the results are pretty consistent between all the browsers that support text shadow, which is encouraging.

When animating text shadow, it's once again pretty compelling to apply different curve functions to different components of what you're animating. So, a text shadow can move, or its blur radius can change over time, or its color can change... but why should these all have to happen at the same rate? I just spent a bit of time playing with settings and came up with the short list of presets you'll see on the example page, but I can just tell from my cursory experimentation that there's a whole world of Hollywood movie credit like text effects awaiting the creative mind with these new features of CSS3. My favorite preset so far is the "Sci-fi Materialize", which makes me think of a Star Trek transporter.