Create a 404 page with CSS3 animations

When I was asked to build a new 404 page for netmagazine.com, my first thought was to create a CSS animation of some sort. I wanted the design to blend seamlessly with the visual style already established for the site, so I started by designing a page with 404 set in Clarendon, which can be found in the navigation and headlines. My next step was to knock out the text with a newsstand style layout of some recent .net magazine covers. To wrap things up, I added the standard-issue 404 page copy and wound up with this:

Not too shabby. As a bit of progressive enhancement, I decided to pan the magazine covers from right to left with CSS animation during the markup process. Remember, CSS animations are currently supported by WebKit browsers only. Here’s the short HTML snippet for the animated element:

<div class="box"> <div class="cover_pan"></div></div>

The “box” class gets some specified dimensions and a semi-transparent .png image background for the 404 text. Ideally, we’d do this with selectable text, but fallbacks for non-compliant browsers are unsightly. To learn more about that, check out this example: trentwalton.com/bgclip/.

Here’s the CSS for “box”:

.box { background: url(img/404.png) no-repeat 0 0; border-bottom: 5px solid #000; height: 343px; margin-bottom: 25px; padding-bottom: 50px;}

Now, to add the magazine covers by targeting that “cover_pan” classed div, we use the same basic idea. You’ve got some properties that help layout dimensions and nestle the magazine cover.jpg behind the 404.png.

.cover_pan{ background: #fff url(img/covers.jpg) repeat 1055px bottom; height: 343px; margin-left:1px; overflow: hidden; position: relative; width:99.5%; z-index: -1;    -moz-animation-name: pan;    -moz-animation-duration:40s;    -moz-animation-iteration-count: infinite;    -moz-animation-timing-function: linear; -webkit-animation-name: pan; -webkit-animation-duration:40s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}

Notice the second half of the properties declared here. We’ve given the animation a name (pan), set its timing at 40 seconds, and set it to play on a continuous loop with an infinite iteration count. Finally, we set a steady, even pace by indicating a linear timing function. If we used something like easeout or ease-in for timing, it’d hit users with a jolt each time it loops.

Now for the keyframe animation:

@-moz-keyframes pan {    0% {        background-position: 1338px bottom;    }    100% {        background-position: left bottom;    }}@-webkit-keyframes pan { 0% { background-position: 1338px bottom; } 100% { background-position: left bottom; }}

This is one of the most straightforward implementations you could choose. Over 40 seconds, we’re sliding the background position of .cover_pan from right to left.

To learn more about CSS visual effects, take a look at this article I co-authored with my Paravel cohort, Dave Rupert: www.netmagazine.com/tutorials/add-cutting-edge-visual-effects.

Firefox 5 releases today with support for CSS animations! All animated properties in this tutorial have been updated to include the moz prefix.