WebKitBits

RSS Twitter

A tumblog about the browser engine built into Safari, Chrome, iPhone, Palm Pre, and Android.

Written by David Kaneda, Creative Director at Ext JS. Submissions welcome.

Latest from @WebKitBits:

CSS Animations Primer

This is our first guest post on WebKitBits, from Jon Neal, web designer and developer. More info about Jon can be found at the bottom of this post. If you are interest in writing a guest article for WebKitBits, please contact David Kaneda.

CSS animations are HTML DOM element animation effects that function via the CSS layer (as opposed to through Javascript or Flash, for example). CSS animations have the potential to be a powerful new weapon in the web development arsenel of the future. There seems to be some controversy over them in the web sphere, although I believe this to be misplaced.

The main argument against using CSS animations is that animation is in the realm of Javascript and adding CSS animations on top of a Javascript animation layer will cause elements to behave unpredictably. There is an issue here (though it is resolvable through the creation of standards), but I don’t think that it’s any reason to throw the baby out with the bathwater. Currently, CSSanimations are not practical in most web development—support in Firefox and IE is not yet there, which account for the vast majority of web surfers. However, for users of Google Chromeor Safari, they do have a place as simple progressive enhancements. Why not increase the size of that button 10% when a mouse hovers over it? It only takes 2 lines in a CSS file, and those surfers that can’t see it aren’t missing out on a lot. One great example of this progressive enhancement is new Atebits website, where the main product icons rotate and grow slightly when the user mouses over them.

CSS, by it’s nature, controls the look and feel of the presentation layer. The beauty of a CSSanimation is that often to get the effect that you desire, you need not introduce any code at the markup layer, which is supposed to contain as little presentation artifacts as possible (a semantic web). Additionally, CSS animations rest on the system’s hardware for animation, which provides unparalleled performance when compared to Javascript methods.

CSS animations also have their limitations, which is why I support their use only under certain circumstances. Right now, CSS animations don’t affect page layout—if you move or scale an element, it doesn’t really move or scale, only it’s visual representation does. To that end, animations that affect layout are not yet appropriate for CSS —jQuery’s element.Hide() and element.Show(), for example, do affect layout. A CSS animation would not be an appropriate substitute for this behavior. Also, the behavior of CSS animations is such that they aren’t suitable for extremely complex animations. All CSS animations are completely reversible, and as such, they can’t accept property changes as dynamically as one might need.

All in all, CSS animations are a very interesting thing to play around with, and are certainly an evolutionary step in the abilities of the top-level presentation layer. The next level of CSSanimation is 3D CSS transforms, which are currently only supported on Safari for the iPhone. Take the time to dive under the hood a little, and check out CSS animations for yourself.

About the Author
Jon Neal is a co-owner and webmaster for blaq design, a small bike company. When he’s not there, you can catch him blogging at his website, Ferret Army, working at FIT Technologies, or just enjoying the best that Cleveland, Ohio has to offer.