css3強(qiáng)大的動(dòng)畫(huà)效果animate使用說(shuō)明及瀏覽器兼容介紹
發(fā)布時(shí)間：2013-01-09 09:42:09 作者：佚名 
我要評(píng)論
我要評(píng)論昨天突然看到j(luò)ing.fm（這個(gè)音樂(lè)網(wǎng)站非常不錯(cuò)，很多效果我都很喜歡，如果你有興趣，可以去圍觀下）上音樂(lè)播放時(shí)，專輯的轉(zhuǎn)動(dòng)效果很不錯(cuò)，所以準(zhǔn)備自己動(dòng)手寫(xiě)下，以備后用。結(jié)果第一次使用animate就遇到了坑爹的事情，特吐槽下
好久沒(méi)更新blog，上次發(fā)文（11月8日）到現(xiàn)在剛好一個(gè)月，期間項(xiàng)目上的東西比較多，一時(shí)覺(jué)得時(shí)間比較緊，沒(méi)來(lái)得及更新。這個(gè)星期總算是告一段落，補(bǔ)上幾篇技術(shù)性的文章。好吧，第一篇是關(guān)于css3動(dòng)畫(huà)的使用。
昨天突然看到j(luò)ing.fm（這個(gè)音樂(lè)網(wǎng)站非常不錯(cuò)，很多效果我都很喜歡，如果你有興趣，可以去圍觀下）上音樂(lè)播放時(shí)，專輯的轉(zhuǎn)動(dòng)效果很不錯(cuò)，所以準(zhǔn)備自己動(dòng)手寫(xiě)下，以備后用。結(jié)果第一次使用animate就遇到了坑爹的事情，特吐槽下。
一、最終的效果
所示，最終是想讓這個(gè)專輯的圖片轉(zhuǎn)動(dòng)起來(lái)，模擬出唱片播放的效果（你可以去jing.fm上看看真實(shí)的效果，很贊，現(xiàn)在很多音樂(lè)網(wǎng)站都添加了這個(gè)效果）。
二、結(jié)構(gòu)代碼
復(fù)制代碼
代碼如下:<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>音樂(lè)專輯播放模擬</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="bd">
<div id="musicBox">
<div class="cover rotateCD"></div>
<div class="mask"></div>
</div>
</div>
</body>
</html>
從上面的代碼可以看出，由于是使用css3強(qiáng)大的動(dòng)畫(huà)效果，所以我的結(jié)構(gòu)定義的非常簡(jiǎn)單（在符合語(yǔ)義的前提下），同時(shí)沒(méi)有引用到j(luò)avascript腳本文件。
musicBox來(lái)限定外圍框的大小，內(nèi)部的cover用來(lái)顯示專輯封面圖片，這個(gè)圖片是下圖左邊圖片這樣的，四四方方，不是圓形，所以我在后面做了個(gè)mask的div，它不做其他事情，只是用來(lái)容納一個(gè)遮罩（下圖右邊圖片），蓋住圖片圓形之外的部分。
三、css3樣式表
復(fù)制代碼
代碼如下:@charset utf-8;
/* common: rotateCD */
@-webkit-keyframes myrotate{
0%{
-webkit-transform : rotate(0deg);
}
100%{
-webkit-transform : rotate(360deg);
}
}
@-moz-keyframes myrotate{
0%{
-moz-transform : rotate(0deg);
}
100%{
-moz-transform : rotate(360deg);
}
}
@-ms-keyframes myrotate{
0%{
-ms-transform : rotate(0deg);
}
100%{
-ms-transform : rotate(360deg);
}
}
@-o-keyframes myrotate{
0%{
-o-transform : rotate(0deg);
}
100%{
-o-transform : rotate(360deg);
}
}
@keyframes myrotate{
0%{
transform : rotate(0deg);
}
100%{
transform : rotate(360deg);
}
}
.rotateCD{
-webkit-animation: myrotate 9.5s infinite linear;
-moz-animation: myrotate 9.5s infinite linear;
-ms-animation: myrotate 9.5s infinite linear;
-o-animation: myrotate 9.5s infinite linear;
animation: myrotate 9.5s infinite linear;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-ms-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
/* module: bd */
#bd{width: 960px;margin: 200px auto 0;}
/* module: musicBox */
#musicBox{position: relative;width: 430px;height: 430px;margin: 0 auto;overflow: hidden;}
#musicBox .cover{width: 300px;height: 300px;margin: 65px;background: url(../img/music1.jpg) 0 0 no-repeat;}
#musicBox .mask{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../img/playerMask.png) 0 0 no-repeat;}
rotateCD這部分的代碼兼容了多種高級(jí)瀏覽器（當(dāng)然是支持css3的），設(shè)置了動(dòng)畫(huà)執(zhí)行的時(shí)間和其他一些設(shè)置，你可以查詢animate的更多知識(shí)來(lái)深入了解。
對(duì)于上面的關(guān)于動(dòng)畫(huà)關(guān)鍵幀keyframes的寫(xiě)法，踩了比較多的坑，一開(kāi)始，我是看《HTML5與CSS3權(quán)威指南》上的例子，它只寫(xiě)了chrome下的寫(xiě)法（比較坑，我猜測(cè)估計(jì)是作者認(rèn)為其他瀏覽器的寫(xiě)法與此類似，所以讓讀者自己去摸索），我想當(dāng)然的把其他瀏覽器的兼容性rotate設(shè)置寫(xiě)成了，如下面的代碼所示：
復(fù)制代碼
代碼如下:@-webkit-keyframes myrotate{
0%{
-webkit-transform : rotate(0deg);
-moz-transform : rotate(0deg);
-ms-transform : rotate(0deg);
-o-transform : rotate(0deg);
transform : rotate(0deg);
}
....
這樣導(dǎo)致的結(jié)果就是，chrome和safari下動(dòng)畫(huà)正常，F(xiàn)F、opera和IE下均無(wú)動(dòng)畫(huà)。其實(shí)這部分很好理解，myrotate的關(guān)鍵幀只是對(duì)webkit做了特殊說(shuō)明，其他瀏覽器根本對(duì)此置之不理，所以沒(méi)有動(dòng)畫(huà)的效果。
因此，我們?cè)趯?xiě)關(guān)鍵幀適配樣式的時(shí)候，一定要寫(xiě)成下面的形式：
復(fù)制代碼
代碼如下:@-webkit-keyframes myrotate{
0%{
-webkit-transform : rotate(0deg);
}
...
@-moz-keyframes myrotate{
0%{
-moz-transform : rotate(0deg);
}
...
@-ms-keyframes myrotate{
0%{
-ms-transform : rotate(0deg);
}
...
@-o-keyframes myrotate{
0%{
-o-transform : rotate(0deg);
}
...
@keyframes myrotate{
0%{
transform : rotate(0deg);
}
...
opera瀏覽器還有個(gè)比較怪異的地方，它偏愛(ài)@keyframes myrotate{...}，而對(duì)@-o-keyframes myrotate{...}不感冒，所以你發(fā)現(xiàn)兩者只存其一的時(shí)候，前者可以實(shí)現(xiàn)動(dòng)畫(huà)，而后者不能實(shí)現(xiàn)動(dòng)畫(huà)效果。我一直對(duì)此很是不解，后來(lái)找到關(guān)于opera的介紹，說(shuō)它是嚴(yán)格的執(zhí)行W3C網(wǎng)頁(yè)標(biāo)準(zhǔn)。這樣想想，就明白了為什么它如此偏愛(ài)@keyframes myrotate{...}了。
四、總結(jié)
css3看起來(lái)非常美好，但是實(shí)際使用中還是存在不少的不確定性。如果不能看到已經(jīng)實(shí)現(xiàn)的代碼模板，你很難確信自己的代碼格式就一定正確。所以你可以到一些不錯(cuò)的網(wǎng)站來(lái)觀察各種動(dòng)畫(huà)效果，選擇自己喜歡的動(dòng)畫(huà)并生成代碼，下載下來(lái)后再按照自己的需求來(lái)編寫(xiě)動(dòng)畫(huà)代碼。這樣會(huì)讓你的動(dòng)畫(huà)效果實(shí)現(xiàn)起來(lái)事半功倍（不要擔(dān)心它達(dá)不到你的要求，上面有很多的效果，你可以自己組合，只要你的想象力夠豐富）。
好吧，本文到此結(jié)束。
PS：文中使用到的瀏覽器為chrome（21.0.1180.15）、safari5.1.7（7534.57.2）、opera（12.11）、FF（17.0.1）和IE10（10.0.9200.16438）。
相關(guān)文章
Animate.css擁有多款文字特效的css3動(dòng)畫(huà)庫(kù)效果源碼
Animate.css擁有多款文字特效的css3動(dòng)畫(huà)庫(kù)效果源碼，是一段擁有數(shù)十款文字特效的css3動(dòng)畫(huà)庫(kù)代碼，在這里我們可以對(duì)文字進(jìn)行選擇要加載的動(dòng)畫(huà)特效，需要此款源碼的朋友們可2014-11-10基于css3 animate制作絢麗的動(dòng)畫(huà)效果
Animate.css是一個(gè)超強(qiáng)的CSS3動(dòng)畫(huà)庫(kù)，它使用簡(jiǎn)單只需要將相關(guān)效果對(duì)應(yīng)的class加入頁(yè)面元素中，就能實(shí)現(xiàn)翻轉(zhuǎn)、滑動(dòng)、旋轉(zhuǎn)等等復(fù)雜超炫的跨瀏覽器的動(dòng)畫(huà)效果，讓開(kāi)發(fā)這制作頁(yè)2015-11-24
