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.)
In the beginning of the year 
Google or Microsoft will launch an Amazon AWS competitor 
.
We started using 
The recent javascript vm wars harken back to the video card wars of the early 2000’s where 3dfx, ATI, and NVIDIA where trading blows. Instead of we have Google, WebKit, and Mozilla trading blows by releasing a faster and faster vm at what seems like a weekly rate. 
After reading about the new JavaScript VM in 
Google released the closest look at their new Android software today through 
