Home > Blogs > Amazing CSS Animations

The WebKit team has really been pushing the envelope in its latest builds. Recently, they've add CSS-based animations, where complex animations can be done with a single CSS rule instead of pages of JavaScript.

WebKit, if you didn’t know, is the web rendering engine behind Apple’s Safari web browser. It’s Open Source, too, meaning that anyone can take the WebKit source and build their own browser. In fact, Google is including WebKit in its Android mobile platform.

One thing that amazes me about WebKit is how the team keeps pushing the web forward. Over the past several months, they’ve added a ton of great features for web developers, and they just keep piling them on. Recently they announced support for CSS Animations. These are animations that are specified right within the CSS rather than JavaScript. For many web page animations, this effectively reduces to a single line of CSS code what would previously have been pages of JavaScript.

Here’s an example:

With WebKit, this box will rotate, move, and fade out when you click the button below.

For most browsers, if you click the Fade Out button, the box will simply vanish. If you’re using a WebKit-based browser, however, the box does something much cooler. It will rotate, slide to the right, and fade away, all at the same time. Here’s a screencapture of what it looks like:



Wanna see how it’s done? Here’s the HTML:

<div id="fader">With WebKit, this box will rotate, move, and fade out when you click the button below.</div>

<p>
<input type="button" value="Fade Out" onclick="document.getElementById('fader').className='fader out';" /> <input type="button" value="Fade In" onclick="document.getElementById('fader').className='fader';" />
</p>

And here’s the CSS:

#fader {
margin: 50px 10px;
border: 6px solid #abc;
color: #345;
padding: 10px;
width: 200px;
opacity: 1;
overflow:hidden;
background-color: #fff3af;
-webkit-transition:all .5s linear;
}
#fader.out {
opacity: 0;
border-color: white;
border-width: 0;
background-color:#fff;
margin-left: 400px;
-webkit-transform:rotate(360deg);
}

If you’ll notice, the only JavaScript I’m using here is to change the class name on the #fader div, and that could have been just as easily handled through :hover. So with just a single line of CSS, namely -webkit-transition:all .5s linear;, I get all that animated goodness for free. The WebKit blog has more details on how this works, and they’re promising a much more detailed set of documents soon.

Why is this so cool? In addition to being just plain sexy, animations are an important indicator that something in the interface has changed. They catch your eye and direct your attention to a part of the UI that is being affected.

As a web developer, I spend a lot of time adding a ton of JavaScript code to get these animations to happen. With CSS-based animations, none of that extra code is necessary. For developers, that means less time spent on animation code and more time spent on adding actual features. For users, it means smaller, faster-loading webpages. It’s a win-win!

Thanks WebKit! Keep up the great work!


[Previously published at RecursiveFunction.com]

Become an InformIT Member

Take advantage of special member promotions, everyday discounts, quick access to saved content, and more! Join Today.