Dissecting Safari 4′s Welcome Screen

If you’ve downloaded Safari 4 Beta then you’ve seen a very cool welcome screen. If you haven’t seen it click the video above (or if you’re running Safari 4 you can view it again here). I was curious as to how this page was put together so I did some dissecting…

HTML 5 – Cleverly, Apple decided to use HTML5 and the <audio> and <video> tags for the sound effects and part of the animation. The only part that is a full blown .mov is the ending compass sequence. Here is the .mov.

CSS Animation – The first 2 animations, the Apple logo (plus lens flare) and the Welcome to Safari 4 are achieved by a combination of CSS animations (stylesheet) and a series of images.

The Welcome to Safari 4, is the simplest of the 2. It uses this image:

… and this scaling animation rule:

@-webkit-keyframes header {
	from {
		opacity: 0;
		-webkit-transform: scale(2.6);
		-webkit-animation-timing-function: linear;
	}
	20% {
		opacity: 1;
		-webkit-transform: scale(1);
		-webkit-animation-timing-function: linear;
	}
	77% {
		opacity: 1;
		-webkit-transform: scale(0.9);
		-webkit-animation-timing-function: linear;
	}
	to {
		opacity: 0;
		-webkit-transform: scale(0.1);
		-webkit-animation-timing-function: linear;
	}
}

The Apple logo animation is bit more tricky and is achieved with these four images:

… plus 4 different css animation rules that are similar to the rule above but each image’s opacity is changed from 0 to 1 at the appropriate time.

Works on an iPhone – What’s more impressive is that this page more or less works on an iPhone! The .mov and audio do not play, but everything animations properly. I removed the javascript that disables the page for non-Safari 4 browsers and put it here http://waynepan.com/s/safari4.

Bonus! – At the end of all the animation, the page redirects you to topsites://, which of course takes you to Top Sites.

The Safari Welcome screen is a peak into the future. It shows us what’s possible when you get to throw all backwards compatibility concerns out the window… (no pun intended.)