JasonWyatt

The legendary web designer, Mike Kus of Carsonified has been working on changes to the web site for the Future of Web Design conference they hold every year. A few minutes ago, he tweeted about a really cool little 404 Error page that uses CSS Animations in webkit to create a rotating Earth.

Naturally, I had to dig through the source code to find out what made it spin, here’s what I found:

/********** 404 Page **********/
#earth {
	width:100%;
	height:1500px;
	background:url(../images/presentation/planet_1500.jpg) top center no-repeat;
	position:absolute;
	margin:-1100px 0px 0px 0px;
	-webkit-animation-name: earthRotation;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 500s;
	z-index:-1;
}

@-webkit-keyframes earthRotation {
from {
	-webkit-transform: rotate(0deg);
	}
to {
	-webkit-transform: rotate(360deg);
	}
}

This is an awesome use of CSS animation.

Why? because it is completely progressively-enhanced. If the viewer is not using a webkit browser (Chrome, Safari, etc.), they’ll still see the earth in the background but it won’t be spinning - and they won’t know the difference. Check it out, here.

Nicely done, Mike.