We've had a chance to play around with CSS animations on some of our internal tools and let's not kid ourselves...CSS animation is slick. Safari renders it incredibly quickly and smoothly (so much so that the Safari 4 welcome splash is made almost completely in HTML5 and CSS3). So what can CSS animation do and, more importantly, what can't it do?
This Will Look Weird in Safari (and Chrome)
...because it's a 2 degree tilt. Safari 4 supports an array of transforms; functions that can be applied to almost any element to make a visual (but not structural) change. It has all kinds of fun transforms from rotate and skew to generated gradients, masking and box reflection.
As with any tool there are a lot of hilarious ways to overuse these effects but used well you can create some pretty incredible visuals with a laughably small amount of work. In addition to transforms Safari supports transitions, basically a means of telling the browser that when a CSS property changes (say, for :hover) to make that change over a set period of time, with a transition timing (easing in or out, for example).
That block tells the browser that when the element opacity changes, make the change over 2 seconds (instead of an instant change). Transitions support most any CSS property including position, size – and more interestingly, CSS transforms like scale and rotate or even generated gradients and masks. Combining these new effects can create some pretty complex visual effects and opens up a whole big toolbox for us.
CSS animations round out the new visual effects by allowing you to define an animation and specify keyframes to alter any CSS property. For example, this animation has three stages and changes the object from translucent to opaque, increases the size by 1.2x, then collapses it back to regular size and opacity. This repeats 10 times to create a pulsing effect.
To execute this animation I assign the animation to an object, give it a duration and optionally define how many times I want it to iterate. Hover over the block below to see the animation.
Not in Safari? Watch the demo on YouTube.
These are quick and dirty examples but creating considered, powerful effects for the web is much, much easier in CSS3 than it has ever been before. So what can't we do with CSS3?
CSS animation is cool...really, really cool. Even as what is still a possible addition to CSS3 we can already see the potential in these new tools. They'll be used well and used poorly, as with any tool, but this gets us a head start on a much more dynamic web experience (without resorting to Flash). Check out the Safari Visual Effects Guide for a primer on the tools available. This is brand new territory, so there's a lot of opportunity to get out in front and explore the possibilities. Go play around with it!