完全参考这篇文章：利用 CSS3 实现页面淡入动画特效。

利用了 CSS3 的动画属性 「@keyframes 」 实现页面动态特效。关于 @keyframes 规则。

代码如下：

@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 内核*/  
}

针对不同页面设置不同的淡入时间，比如侧边栏：

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

参考链接：利用 CSS3 实现页面淡入动画特效