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.
Here’s an example:
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>
<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';" />
And here’s the CSS:
margin: 50px 10px;
border: 6px solid #abc;
-webkit-transition:all .5s linear;
: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.
Thanks WebKit! Keep up the great work!
[Previously published at RecursiveFunction.com]
Take advantage of special member promotions, everyday discounts, quick access to saved content, and more! Join Today.