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:
header
… 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:
apple_icon apple_flare apple_spots apple_flare_icon
… 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.)

8 responses to “Dissecting Safari 4’s Welcome Screen”

  1. Its great to see people really moving into creative things, i really loved this post. The only thing i couldnt grab was your test page link.. Its not working here in firefox or IE 7/8.. etc. Any ideas?

  2. Wayne says:

    @Sarmad The css declarations on the page only work in Safari (they are prefixed with -webkit). The one thing I would like Mozilla and Webkit to do is to unify the css rules so we don’t have to resort to -webkit and -mozilla.

  3. Well dissected! I can’t wait to see what’s to come as more developers start using the new CSS3 & HTML5 features. Props to Apple for this excellent composition.

  4. Khim says:

    i like the design of Safari 4 but i think it uses more resources compared to Opera.

  5. Sunmi says:

    i really love the layout of Safari 4. the graphics of this browser looks much better than firefox.

  6. Epic118 says:

    Went on Safari on iPhone, typed in address and it crashed -_-

  7. Cameron says:

    Why does the copy you hosted not re-direct?

    And how would one change that redirection?

  8. huxley says:

    @Wayne,

    The declarations will be united when the specs and common implementations are firmed up, adding a prefix like this is the proper approach to developing bleeding-edge web standard features before the standard is finalized.