好久沒更新blog，上次發文（11月8日）到現在剛好一個月，期間項目上的東西比較多，一時覺得時間比較緊，沒來得及更新。這個星期總算是告一段落，補上幾篇技術性的文章。好吧，第一篇是關於css3動畫的使用。
昨天突然看到jing.fm（這個音樂網站非常不錯，很多效果我都很喜歡，如果你有興趣，可以去圍觀下）上音樂播放時，專輯的轉動效果很不錯，所以准備自己動手寫下，以備后用。結果第一次使用animate就遇到了坑爹的事情，特吐槽下。
一、最終的效果
如上圖所示，最終是想讓這個專輯的圖片轉動起來，模擬出唱片播放的效果（你可以去jing.fm上看看真實的效果，很贊，現在很多音樂網站都添加了這個效果）。
二、結構代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8'> 5 <title>音樂專輯播放模擬</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <div id="bd"> 10 <div id="musicBox"> 11 <div class="cover rotateCD"></div> 12 <div class="mask"></div> 13 </div> 14 </div> 15 </body> 16 </html>
從上面的代碼可以看出，由於是使用css3強大的動畫效果，所以我的結構定義的非常簡單（在符合語義的前提下），同時沒有引用到javascript腳本文件。
musicBox來限定外圍框的大小，內部的cover用來顯示專輯封面圖片，這個圖片是下圖左邊圖片這樣的，四四方方，不是圓形，所以我在后面做了個mask的div，它不做其他事情，只是用來容納一個遮罩（下圖右邊圖片），蓋住圖片圓形之外的部分。
三、css3樣式表
1 @charset utf-8; 2 3 /* common: rotateCD */ 4 @-webkit-keyframes myrotate{ 5 0%{ 6 -webkit-transform : rotate(0deg); 7 } 8 100%{ 9 -webkit-transform : rotate(360deg); 10 } 11 } 12 @-moz-keyframes myrotate{ 13 0%{ 14 -moz-transform : rotate(0deg); 15 } 16 100%{ 17 -moz-transform : rotate(360deg); 18 } 19 } 20 @-ms-keyframes myrotate{ 21 0%{ 22 -ms-transform : rotate(0deg); 23 } 24 100%{ 25 -ms-transform : rotate(360deg); 26 } 27 } 28 @-o-keyframes myrotate{ 29 0%{ 30 -o-transform : rotate(0deg); 31 } 32 100%{ 33 -o-transform : rotate(360deg); 34 } 35 } 36 @keyframes myrotate{ 37 0%{ 38 transform : rotate(0deg); 39 } 40 100%{ 41 transform : rotate(360deg); 42 } 43 } 44 .rotateCD{ 45 46 -webkit-animation: myrotate 9.5s infinite linear; 47 -moz-animation: myrotate 9.5s infinite linear; 48 -ms-animation: myrotate 9.5s infinite linear; 49 -o-animation: myrotate 9.5s infinite linear; 50 animation: myrotate 9.5s infinite linear; 51 52 -webkit-animation-play-state: running; 53 -moz-animation-play-state: running; 54 -ms-animation-play-state: running; 55 -o-animation-play-state: running; 56 animation-play-state: running; 57 58 } 59 60 /* module: bd */ 61 #bd{width: 960px;margin: 200px auto 0;} 62 63 /* module: musicBox */ 64 #musicBox{position: relative;width: 430px;height: 430px;margin: 0 auto;overflow: hidden;} 65 #musicBox .cover{width: 300px;height: 300px;margin: 65px;background: url(../img/music1.jpg) 0 0 no-repeat;} 66 #musicBox .mask{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../img/playerMask.png) 0 0 no-repeat;}
rotateCD這部分的代碼兼容了多種高級瀏覽器（當然是支持css3的），設置了動畫執行的時間和其他一些設置，你可以查詢animate的更多知識來深入了解。
對於上面的關於動畫關鍵幀keyframes的寫法，踩了比較多的坑，一開始，我是看《HTML5與CSS3權威指南》上的例子，它只寫了chrome下的寫法（比較坑爹，我猜測估計是作者認為其他瀏覽器的寫法與此類似，所以讓讀者自己去摸索），我想當然的把其他瀏覽器的兼容性rotate設置寫成了，如下面的代碼所示：
1 @-webkit-keyframes myrotate{ 2 0%{ 3 -webkit-transform : rotate(0deg); 4 -moz-transform : rotate(0deg); 5 -ms-transform : rotate(0deg); 6 -o-transform : rotate(0deg); 7 transform : rotate(0deg); 8 } 9 ....
這樣導致的結果就是，chrome和safari下動畫正常，FF、opera和IE下均無動畫。其實這部分很好理解，myrotate的關鍵幀只是對webkit做了特殊說明，其他瀏覽器根本對此置之不理，所以沒有動畫的效果。
因此，我們在寫關鍵幀適配樣式的時候，一定要寫成下面的形式：
1 @-webkit-keyframes myrotate{ 2 0%{ 3 -webkit-transform : rotate(0deg); 4 } 5 ... 6 @-moz-keyframes myrotate{ 7 0%{ 8 -moz-transform : rotate(0deg); 9 } 10 ... 11 @-ms-keyframes myrotate{ 12 0%{ 13 -ms-transform : rotate(0deg); 14 } 15 ... 16 @-o-keyframes myrotate{ 17 0%{ 18 -o-transform : rotate(0deg); 19 } 20 ... 21 @keyframes myrotate{ 22 0%{ 23 transform : rotate(0deg); 24 } 25 ...
opera瀏覽器還有個比較怪異的地方，它偏愛@keyframes myrotate{...}，而對@-o-keyframes myrotate{...}不感冒，所以你發現兩者只存其一的時候，前者可以實現動畫，而后者不能實現動畫效果。我一直對此很是不解，后來找到關於opera的介紹，說它是嚴格的執行W3C網頁標准。這樣想想，就明白了為什么它如此偏愛@keyframes myrotate{...}了。
四、總結
css3看起來非常美好，但是實際使用中還是存在不少的不確定性。如果不能看到已經實現的代碼模板，你很難確信自己的代碼格式就一定正確。所以你可以到http://daneden.me/animate/來觀察各種動畫效果，選擇自己喜歡的動畫並生成代碼，下載下來后再按照自己的需求來編寫動畫代碼。這樣會讓你的動畫效果實現起來事半功倍（不要擔心它達不到你的要求，上面有很多的效果，你可以自己組合，只要你的想象力夠豐富）。
好吧，本文到此結束。
PS：文中使用到的瀏覽器為chrome（21.0.1180.15）、safari5.1.7（7534.57.2）、opera（12.11）、FF（17.0.1）和IE10（10.0.9200.16438）。