CSS3新增動(dòng)畫屬性“@-webkit-keyframes”，從字面就可以看出其含義——關(guān)鍵幀，這與Flash中的含義一致。利用CSS3制作動(dòng)畫效果其原理與Flash一樣，我們需要定義關(guān)鍵幀處的狀態(tài)效果，由CSS3來驅(qū)動(dòng)產(chǎn)生動(dòng)畫效果。下面講解一下如何利用CSS3制作淡入淡出的動(dòng)畫效果。具體實(shí)例可參考剛進(jìn)入本站時(shí)的淡入效果。

1. 定義動(dòng)畫，名稱為fadeIn

@-webkit-keyframes fadeIn {
0% {
opacity: 0; /*初始狀態(tài) 透明度為0*/
}
50% {
opacity: 0; /*中間狀態(tài) 透明度為0*/
}
100% {
opacity: 1; /*結(jié)尾狀態(tài) 透明度為1*/
}
}

2.  在ID或類中增加如下的動(dòng)畫代碼

#box{
-webkit-animation-name: fadeIn; /*動(dòng)畫名稱*/
-webkit-animation-duration: 3s; /*動(dòng)畫持續(xù)時(shí)間*/
-webkit-animation-iteration-count: 1; /*動(dòng)畫次數(shù)*/
-webkit-animation-delay: 0s; /*延遲時(shí)間*/
}

通過上面的代碼即可實(shí)現(xiàn)淡入淡出的動(dòng)畫效果，代碼具體的含義已在注釋中注明。