利用CSS3制作淡入淡出動畫效果

 

CSS3新增動畫屬性“@-webkit-keyframes”，從字面就可以看出其含義——關鍵幀，這與Flash中的含義一致。

利用CSS3制作動畫效果其原理與Flash一樣，我們需要定義關鍵幀處的狀態效果，由CSS3來驅動產生動畫效果。

下面講解一下如何利用CSS3制作淡入淡出的動畫效果。具體實例可參考剛進入本站時的淡入效果。

1. 定義動畫，名稱為fadeIn

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

2.  在ID或類中增加如下的動畫代碼

#box
{-webkit-animation-name: fadeIn; /*動畫名稱*/
-webkit-animation-duration: 3s; /*動畫持續時間*/
-webkit-animation-iteration-count: 1; /*動畫次數*/
-webkit-animation-delay: 0s; /*延遲時間*/}

通過上面的代碼即可實現淡入淡出的動畫效果，代碼具體的含義已在注釋中注明。

標簽： CSS3    動畫    技巧