Create a 404 page with CSS3 animations

When I was asked to build a new 404 page for, 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:

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:

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

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.