Webslingers' Journal

Web geekery with
Trey and Jason and Jason.

CSS Animations Primer


This is our first guest post on WebKitBits, from Jon Neal, web designer and developer. More info about Jon can be found at the bottom of this post. If you are interest in writing a guest article for WebKitBits, please contact David Kaneda.

CSS animations are HTML DOM element animation effects that function via the CSS layer (as opposed to through Javascript or Flash, for example). CSS animations have the potential to be a powerful new weapon in the web development arsenel of the future. There seems to be some controversy over them in the web sphere, although I believe this to be misplaced.

The main argument against using CSS animations is that animation is in the realm of Javascript and adding CSS animations on top of a Javascript animation layer will cause elements to behave unpredictably. There is an issue here (though it is resolvable through the creation of standards), but I don’t think that it’s any reason to throw the baby out with the bathwater. Currently, CSSanimations are not practical in most web development—support in Firefox and IE is not yet there, which account for the vast majority of web surfers. However, for users of Google Chromeor Safari, they do have a place as simple progressive enhancements. Why not increase the size of that button 10% when a mouse hovers over it? It only takes 2 lines in a CSS file, and those surfers that can’t see it aren’t missing out on a lot. One great example of this progressive enhancement is new Atebits website, where the main product icons rotate and grow slightly when the user mouses over them.

CSS, by it’s nature, controls the look and feel of the presentation layer. The beauty of a CSSanimation is that often to get the effect that you desire, you need not introduce any code at the markup layer, which is supposed to contain as little presentation artifacts as possible (a semantic web). Additionally, CSS animations rest on the system’s hardware for animation, which provides unparalleled performance when compared to Javascript methods.

CSS animations also have their limitations, which is why I support their use only under certain circumstances. Right now, CSS animations don’t affect page layout—if you move or scale an element, it doesn’t really move or scale, only it’s visual representation does. To that end, animations that affect layout are not yet appropriate for CSS —jQuery’s element.Hide() and element.Show(), for example, do affect layout. A CSS animation would not be an appropriate substitute for this behavior. Also, the behavior of CSS animations is such that they aren’t suitable for extremely complex animations. All CSS animations are completely reversible, and as such, they can’t accept property changes as dynamically as one might need.

All in all, CSS animations are a very interesting thing to play around with, and are certainly an evolutionary step in the abilities of the top-level presentation layer. The next level of CSSanimation is 3D CSS transforms, which are currently only supported on Safari for the iPhone. Take the time to dive under the hood a little, and check out CSS animations for yourself.

About the Author
Jon Neal is a co-owner and webmaster for blaq design, a small bike company. When he’s not there, you can catch him blogging at his website, Ferret Army, working at FIT Technologies, or just enjoying the best that Cleveland, Ohio has to offer.

Startup screens for mobile web apps (iPhone 3.0)


In the most recent iPhone and iPod Touch software upgrade, Apple added the ability to show a startup image for websites saved to a user’s home screen. Until now, these full-screen web apps would simply show a (poorly) compressed screenshot of the previous page viewed or nothing at all. To add a startup screen, simply include a the following tag in the head of your document and create an image in the location referenced by href:

<link rel="apple-touch-startup-image" href="startup.png" />

The PNG can be named anything, but it must be in PNG format and it must be 320x460 pixels. Technically, it seems the PNG displays until the document triggers the ‘ready’ callback, before the window’s ‘loaded’ callback. If I get a chance later, I’ll create a video demo of how it looks.

Glyphboard 2.0 


Just in time for today’s release of iPhone OS 3.0 with its oh-so-handy pasteboard, I’ve updated a little project of mine, Glyphboard. It’s a sort of keyboard which lets you type glyphs not available on any of the standard iPhone keyboards. These glyphs include , ☂, ☺, ✔, and even ♫.

You may find this handy for Twitter, text messaging, emails, and I’m sure I don’t know what else. A clarification: unfortunately Safari won’t let you just tap a key to copy it; you have to hold and tap. I wish you didn’t, but there.

On the flip side, even though it’s a web app, once you’ve installed Glyphboard it will work even when you’re offline. How’s that!

This is easily one of the nicest iPhone optimized websites I’ve ever seen.

FYI: Transmit will use your SSH keys if you leave the password field blank when connecting via SFTP.

Coding like it's 1999 ~ Authentic Boredom 

  • HTML 4.01 Strict
  • Fonts in px
  • A tongue in cheek reference to going back to using tables

The only thing I found amiss with this article is that he says that HTML 5 will replace divs. That’s not true. It’s just adding some semantic tags that will serve to replace a certain set of nearly-standard IDs/classes people happen to normally put on divs: (nav, header, article, etc.)

Palm Pre intro video. Via Gruber.



David Kaneda’s new project, a tumblelog focussed on Apple’s WebKit browser framework, and in particular its use in the mobile space. Some good tricks and techniques here already.
More Information