Google如何爲其徽標製作動畫？

Question

我一直在試圖弄清楚自從粒子爆炸以來，Google是如何爲他們的標識製作動畫的，而今天他們有a chemistry set來慶祝Robert Bunsen誕辰200週年。我假設這是HTML5（我使用Firefox 4，Chrome和Safari 5），但任何人都可以確認如果是這樣以及是否有任何好的教程如何做這些類型的動畫？

Answer 1

這是partialy HTML5：

1. 他們使用跨瀏覽器精靈技術 - 具有多種場景一個PNG圖像。

他們剪輯一個場景的區域並顯示它。爲了顯示下一個場景，他們只是移動剪輯區域起始偏移。

Firebug的只是檢查：圖像設置爲與heigth只有一個場景的div標籤的背景，那麼他們轉移Y軸偏移量和背景「動作」 - 就像膠片帶:)

這裏是片段（谷歌（C）），通知-380px然後-570px：

<div style="background: url("/logos/2011/bunsen11-hp-sprite.png") 
no-repeat scroll 0pt 
-380px transparent; height: 190px; opacity: 0.3; 
position: absolute; width: 465px; z-index: 20;"></div> 

<div style="background: url("/logos/2011/bunsen11-hp-sprite.png") 
no-repeat scroll 0pt 
-570px transparent; height: 190px; opacity: 0.3; 
position: absolute; width: 465px; z-index: 20;"></div> 

下面是從棧很好的DIY例如：How to show animated image from PNG image using javascript? [ like gmail ]

更新： 2.他們還使用HTML5可以產生一部分具有交互效果的動畫 - 例如氣泡。