利用CSS3實現div頁面淡入動畫特效

利用CSS3實現頁面淡入動畫特效

 

摘要

　　利用CSS3動畫屬性「@keyframes 」可實現一些動態特效，具體語法和參數能夠網上自行學習。這篇文章主要是實踐應用一下這個動畫屬性，實現頁面淡入特效。 在火狐24版、chrome29版、IE10中測試經過。IE9及如下瀏覽器不支持此特效。 　　另外，可針對頁面某部分延長顯示時間，同理，可對頁面不一樣的部分設定不一樣的淡入顯示時間，實現分段顯示。

 

利用CSS3動畫屬性「@keyframes 」可實現一些動態特效，具體語法和參數能夠網上自行學習。這篇文章主要是實踐應用一下這個動畫屬性，實現頁面淡入特效，在火狐24版、chrome29版、IE10中測試經過。IE9及如下瀏覽器不支持此特效。

淡入代碼：

@keyframes fade-in {
    0% {opacity: 0;}/*初始狀態 透明度爲0*/
    40% {opacity: 0;}/*過渡狀態 透明度爲0*/
    100% {opacity: 1;}/*結束狀態 透明度爲1*/
}
@-webkit-keyframes fade-in {/*針對webkit內核*/
    0% {opacity: 0;}
    40% {opacity: 0;}
    100% {opacity: 1;}
}
#wrapper {
    animation: fade-in;/*動畫名稱*/
    animation-duration: 1.5s;/*動畫持續時間*/
    -webkit-animation:fade-in 1.5s;/*針對webkit內核*/
}

直接將上述代碼添加到主題style樣式文件中，並修改其中 #wrapper 爲你的主題ID或類的名稱便可。

另外，可針對頁面某部分延長顯示時間，好比側邊欄，再加上一句：

#sidebar {
    animation: fade-in;
    animation-duration: 4s;
    -webkit-animation:fade-in 1.5s;
}

同理，可對頁面不一樣的部分設定不一樣的淡入顯示時間，實現分段顯示。