HTML5實踐 -- 如何使用css3完成google塗鴉動畫

　　這裡需要強調的一點是，ie不支援css3的動畫屬性，再次抱怨下萬惡的ie。但是我們不能以此為理由不去擁抱css3。

　　我們先來看html代碼。

　　下面是部分css。

　　這部分代碼沒太大難度，我就不做詳細講解了。css基礎不是很紮實的讀者，也許會疑惑【開始】按鈕是如何實作定位的。可以自行閱讀position屬性，了解absolute具體作用。

　　下面是上述html和css代碼完成的頁面效果。

　　我們建立了一個名為horse-ride的關鍵幀，針對chrome和firefox需要在前面添加-webkit-或者是-moz-字首。0%和100%分别代碼開始和結束，可以根據需要增加新的case，比如50%時的動畫效果。

　　

　　下面，我們來為horse添加css3的動畫效果。

　　這裡首先介紹:checked和~，:checked是僞類，指當#play_button選中時的css效果，~指的是#play_button的兄弟節點。

　　接下來介紹.horse相關的css屬性。animation中我們使用了4個值，依次代表：關鍵幀（我們上面定義的horse-ride），動畫間隔時間，動畫效果和執行次數。之後我們又通過animation-delay設定動畫延遲時間。通過transition和background-position集合起來，設定背景的過渡動畫。

　　最後我們為【開始】按鈕添加動畫效果。

　　大家可以自己動手嘗試開發了。

　　原文位址：http://cssdeck.com/labs/google-doodle-for-eadweard-j-muybridges-182nd-birthday

<a href="http://www.vancl.com/?source=kbh1983&amp;sourcesuninfo=ad-3090-1-52-0-1" target="_blank"></a>