A simple summary of what I think is going on here:
There is a bit of slight of hand here that makes this look like a CSS3 animation but I'm pretty sure it's not.
Upon initial page load there is a canvas that takes up the background that has the zipper, logo, split input's and buttons on it. On top of that they have real DOM input and buttons.
When you touch the zipper they hide the DOM elements and reveal the underlying canvas. The background page is loaded and the canvas animation proceeds and reveals the background page.
I believe this is all the code for it: https://gist.github.com/2476246. Line 343 (the $ function declaration) initialized the script and line 363 initialized the canvas element. You're right, not CSS3.
I'm just seeing this for the first time. I wonder how this doodle affected people's productivity. And considering the height, where was the search field placed?
A nice little artistic touch: If you go straight down from the beginning of the Jules Verne logo, there's a bunch of corals which fill the Google porthole perfectly.
It looks like a neat feat, but it is not really interactive, I think. When I pull it somewhat down and then all the way up again, all while keeping mouse1 pressed, it will still unzip.
There is a bit of slight of hand here that makes this look like a CSS3 animation but I'm pretty sure it's not.
Upon initial page load there is a canvas that takes up the background that has the zipper, logo, split input's and buttons on it. On top of that they have real DOM input and buttons.
When you touch the zipper they hide the DOM elements and reveal the underlying canvas. The background page is loaded and the canvas animation proceeds and reveals the background page.