複製程式碼程式碼如下:@-webkit-keyframes horse-ride { % {background-position: 0 0;} % {background-position: -804px 0;} } @-moz-keyframes horse-ride { % {background-position: 0 0;} % {background-position: -804px 0;} }

下面，我們來為horse新增css3的動畫效果。

複製程式碼程式碼如下:#play_button:checked ~.horse{ -webkit-animation:horse-ride 0.5s steps(12,end) infinite; -webkit-animation-delay:2.5s; -moz-animation:horse-ride 0.5s steps(12,end) infinite; -moz-animation-delay:2.5s; background-position: -2412px 0; -webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190); -moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190); }

這裡首先介紹:checked和~，:checked是偽類，指當#play_button選中時的css效果，~指的是#play_button的兄弟節點。 　　接下來介紹.horse相關的css屬性。animation中我們使用了4個值，依次代表：關鍵幀（我們上面定義的horse-ride），動畫間隔時間，動畫效果和執行次數。之後我們又透過animation-delay設定動畫延遲時間。透過transition和background-position集合起來，設定背景的過渡動畫。 　　最後我們為【開始】按鈕新增動畫效果。

複製程式碼程式碼如下:#play_button:checked ~#play_image img{ left:-68px; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; }

大家可以自己動手嘗試開發了。 　　demo下載地址：google-doodle-animation-in-css3-without-javascript.zip今天我們將介紹，如何使用css3完成google塗鴉動畫。當你點選demo頁面的【開始】按鈕之後，頁面中的騎手和馬匹將會運動起來，http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html。 　　這裡需要強調的一點是，ie不支援css3的動畫屬性，再次抱怨下萬惡的ie。但是我們不能以此為理由不去擁抱css3。 　　我們先來看html程式碼。

複製程式碼程式碼如下:@-webkit-keyframes horse-ride { % {background-position: 0 0;} % {background-position: -804px 0;} } @-moz-keyframes horse-ride { % {background-position: 0 0;} % {background-position: -804px 0;} }

下面，我們來為horse新增css3的動畫效果。

複製程式碼程式碼如下:#play_button:checked ~.horse{ -webkit-animation:horse-ride 0.5s steps(12,end) infinite; -webkit-animation-delay:2.5s; -moz-animation:horse-ride 0.5s steps(12,end) infinite; -moz-animation-delay:2.5s; background-position: -2412px 0; -webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190); -moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190); }

這裡首先介紹:checked和~，:checked是偽類，指當#play_button選中時的css效果，~指的是#play_button的兄弟節點。 　　接下來介紹.horse相關的css屬性。animation中我們使用了4個值，依次代表：關鍵幀（我們上面定義的horse-ride），動畫間隔時間，動畫效果和執行次數。之後我們又透過animation-delay設定動畫延遲時間。透過transition和background-position集合起來，設定背景的過渡動畫。 　　最後我們為【開始】按鈕新增動畫效果。

複製程式碼程式碼如下:#play_button:checked ~#play_image img{ left:-68px; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; }