Why Wait Webs

WebKit, the rendering engine that has brought CSS3's explicit animation to the web for the first time!

Today we as web designers and developers get a rare chance to look into the future. The latest nightly build of Webkit (the rendering engine for browsers Apple Safari and Google Chrome) includes some new support for CSS3. Specifically, explicit animations using CSS. Up until now, developers have either had to rely on Flash and all its drawbacks, or bite the bullet and write out a long piece of JavaScript just to get a box to slide in elegantly. JQuery alleviated the problem somewhat, but nothing compares to the visual approach of writing a CSS document.

CSS animation will enable developers to spend much less time on animation which, to the end user, may seem trivial. And it will do so with cleaner, simpler, more robust code that will load significantly faster and run smoother for the end user. Read on to see a preview of how it works, and when you can expect to be able to use this on an actual web page.

So, How Does it Work?

CSS3’s animation works using keyframes, and the browser calculates the in-between frames. So say you want to make a box move from the left side to the right side of the screen. You will tell CSS what the box looks like at point A, and what it looks like at point B, using code that looks something like this:

@-webkit-keyframes bounce {
from {
left: 0px;
}
to {
left: 200px;
}
}

Then you will tell the browser what element to apply it to, how long the duration of the effect is, how many times it should repeat, and which direction it should go. These parameters will change depending on what animation type you are using, but for bounce, the code will look something like this:

div {
-webkit-animation-name: bounce;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 10;
-webkit-animation-direction: alternate;
}

But Can We Actually Use It?

Don’t get over-excited just yet, though. When it comes right down to it, all the cool stuff CSS animation can do is only useful if it’s adopted by browsers, and right now, the only browser that can do this is the WebKit nightly build. Still, for someone like me who has relied on Flash and Javascript in the past, seeing this working and in-action is a spectacular experience! I am witnessing plain, search-engine-friendly text rotating from side to side, background colors changing before my eyes, even dozens of images moving simultaneously without bogging my computer down in the slightest, and most importantly, without any hacks involved.

The question remains however, when will we be able to actually implement CSS animation on our websites? In my opinion, it is likely to be very soon. While it’s true that Microsoft has historically taken 5-10 years to implement features that become standard on all other browsers, this particular trick degrades quite nicely. That is to say, even though Internet Explorer might not support CSS animation until IE10 comes out in the year 2018, a page with CSS animation on it will still look decent in IE - it just won’t be animated. Other major browsers like Safari and Firefox will probably support it much sooner, and web developers can and should begin to use CSS animation as soon as that is the case.

The code examples here and most of this information was gleaned from WebKit’s own blog about CSS explicit animation. They also have some more in-depth information about how it works, and links to live examples that you can view if you download the nightly build of WebKit. And if you’re a developer, that’s not a bad thing anyway - WebKit’s Web Inspector is the best debugging tool I’ve ever used (it squashes Firebug like… well, a bug).

Now that you know a little about CSS animation, and hopefully got a chance to see it in action, let me know your thoughts on it! Are you excited for the new possibilities? Are you scared that pulse will become the new blink and ravage the web in a repeat of the 1990s? Fire away in the comments!