Personally… I think we shouldn’t always let the code/language determine the purpose of whatever it’s representing.
Sure, HTML should define the content and structure of a page, CSS makes it all good and pretty, and JavaScript adds even more bling bling and some Ajax goodness, but like what Drew said, if the animation is purely cosmetic, like for a spinner icon, then CSS animations for it are just fine.
On the other hand, if a block of text will fade out of view and be replaced by another, Ajax-loaded, block of text only when a certain link is clicked, that should be left to JavaScript. Since, without JavaScript enabled, the new content can’t be retrieved, and the fading animation wouldn’t display either. If it were implemented as a CSS transform then the text would fade… into thin air.
On a light note… the spinner example (which was really appropriate given all the Ajax loading effects these days) now leaves me wondering when we’ll start seeing sites that change the cursor to a CSS-animated spinning beachball at random.
Personally… I think we shouldn’t always let the code/language determine the purpose of whatever it’s representing.
Sure, HTML should define the content and structure of a page, CSS makes it all good and pretty, and JavaScript adds even more bling bling and some Ajax goodness, but like what Drew said, if the animation is purely cosmetic, like for a spinner icon, then CSS animations for it are just fine.
On the other hand, if a block of text will fade out of view and be replaced by another, Ajax-loaded, block of text only when a certain link is clicked, that should be left to JavaScript. Since, without JavaScript enabled, the new content can’t be retrieved, and the fading animation wouldn’t display either. If it were implemented as a CSS transform then the text would fade… into thin air.
On a light note… the spinner example (which was really appropriate given all the Ajax loading effects these days) now leaves me wondering when we’ll start seeing sites that change the cursor to a CSS-animated spinning beachball at random.
Oh, right, we have cursor: wait.