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

淡入程式碼：

  1. @keyframes fade-in {    
  2.     40% {opacity: 0;}    
  3. }    
  4.     0% {opacity: 0;}    
  5.     100% {opacity: 1;}    
  6. #wrapper {      
  7.     animation-duration: 1.5s;    
  8. }  

直接將上述程式碼新增到主題 style 樣式檔案中，並修改其中 #wrapper 為你的主題 ID 或類的名稱即可。

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

  1. #sidebar {      
  2.     animation-duration: 4s;    
  3. }  

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