There's been a lot of hullaballoo on the 'tubes about the Safari 4 beta – fast javascript engine, new UI elements (that we're not all sold on), coverflow, full-page zoom and about 140 other features. What's got the online world all hot and bothered though is CSS animation, part of the proposed spec for CSS3.
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?
Why CSS3 Won't Kill Javascript
There's been some discussion that CSS3 breaks a cardinal law of good web design: HTML is for content, CSS is for display and Javascript is for interaction. By allowing elements to shift around CSS3 has stolen a little of Javascript's thunder. Previously if you wanted an object to fade in or out, smoothly move around or rescale you had to use some jQuery (or otherwise) trickery. Some say that CSS3 has outstepped the bounds of CSS by no longer just dealing with visual display...I don't buy it.
Even with animations and transitions CSS3 still only governs the visual display of an object – albeit the visual display over time. With the exception of :hover (which has always allowed CSS to act on user actions) CSS3 still can't execute itself based on interaction. We can do a few tricks by playing with durations and delayed start times (properties supported by CSS animation) but Javascript is still required to create pages that react to user interaction.
What CSS3 does do for us is make complex Javascript interactions suddenly much, much faster to implement. Instead of using jQuery or something else to have elements react visually to input we can use Javascript to simply execute a CSS animation (or add a class with an animation included). Javascript has actually been extended to execute CSS animations and even listen to objects for animation starts and stops.
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!
Jonathan wrote this on in Product Design. It has 13 comments.