CSS3動畫盡管目前只有webkit內核的一些浏覽器才支持，但是作為一個前端從業者，應該有長遠的目光，盡早的去熟悉，今天就用CSS3做了一個照片長廊的應用，效果圖：
Demo地址：請使用safari或者chrome猛擊
制作步驟如下：
1.首先我們鋪設一個漸變的背景色：
background: -webkit-gradient(linear, 0 0, 0 100%, from(#F9F9F9), to(#5F5F5F));
這是webkit內核的浏覽器的寫法（注由於CSS3動畫其他內核浏覽器暫時不能完全支持，所以本例沒有考慮兼容，只針對webkit），意思是讓body的背景從上往下漸變，漸變色從F9F9F9到5F5F5F。
2.設置一個容器來放置照片：
DaimaRen.cn © 2009-2010 by Tomie Zhang.player {
width:1500px;
position:absolute;
left:0px;
top:0px;
-webkit-animation-name: goleft;/*關鍵幀名稱*/
-webkit-animation-duration: 15s;/*播放間隔時間*/
-webkit-animation-iteration-count:infinite;/*循環次數*/
-webkit-animation-direction:alternate;/*動畫方向*/
}
因為我設置的單個圖片寬是300px，一共放了5張，所以總寬度設置為1500，並讓它浮起來，最關鍵的是下面的那幾句，也是給它設置動畫效果。每一句的作用見代碼注釋，如果想詳細了解，可以查閱W3C的草案
3.設置關鍵幀動作。
這個是重點，你的動畫想有什麼效果就在這裡設置：
@-webkit-keyframes goleft {
from {
left: 0;
-webkit-animation-timing-function:ease-in-out;
}
25% {
left: -300px;
-webkit-animation-timing-function:ease-in-in;
}
50% {
left: -600px;
-webkit-animation-timing-function:ease-in-out;
}
75% {
left: -900px;
-webkit-animation-timing-function:ease-in-in;
}
to {
left: -1200px;
}
}
這裡就是對goleft的關鍵幀的描述，其實也就是每一步步進的距離。
還不夠炫，再加點東西：
.player a:hover img {
-webkit-animation-name: zoomIn;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
}
設置當鼠標移到圖片上時，這張圖片放大，這裡我們又設置了一個叫zoomIn的關鍵幀，下面是它的描述：
DaimaRen.cn © 2009-2010 by Tomie Zhang@-webkit-keyframes zoomIn {
from {
-webkit-transform: scale(1);
}
25% {
-webkit-transform: scale(1.2);
}
50% {
-webkit-transform: scale(1.4);
}
to {
-webkit-transform: scale(1.6);
}
}
這裡用到了CSS的轉換屬性裡的放大效果，定義了每一步的放大尺寸，使得圖片能夠平穩的放大。
光看圖似乎不夠哦，加點音樂吧：
<div id="mbox"><audio src="http://nio.name/content/mp3/09.mp3" autoplay="false" controls="true"></audio></div>
用html5的音頻標簽添加一個播放器，聽著歌看著X圖。。。。。囧
最後再加個假的音樂均衡器吧：
<div id="mBar"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
先寫幾個空的標簽，然後我們繼續用CSS3來控制它：
DaimaRen.cn © 2009-2010 by Tomie Zhang#mBar span:nth-child(1){
-webkit-animation-name: bar;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#FF00CC), to(#E8E8E8));
}
#mBar span:nth-child(2){
-webkit-animation-name: bar;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#66FF00), to(#E8E8E8));
}
#mBar span:nth-child(3){
-webkit-animation-name: bar;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#FF3300), to(#E8E8E8));
}
#mBar span:nth-child(4){
-webkit-animation-name: bar;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
}
#mBar span:nth-child(5){
-webkit-animation-name: bar;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;;
}
用CSS3選擇器很方便的給不同的標簽定義不同時常的關鍵幀（這樣就可以讓它們出現錯落的伸縮狀態，以模擬一個音頻波的效果），定義關鍵幀：
DaimaRen.cn © 2009-2010 by Tomie Zhang@-webkit-keyframes bar {
from {
height:10px;
}
to {
height:80px;
}
}
OK,這樣一個完全無需JS的照片長廊就大功告成了，是不是很簡單呢？發揮你的想象力也來CSS3吧！
附送一個使用CSS3的游戲：http://icefox.net/anigma/