几行代码实现页面的淡入特效

本站在#content实现，利用CSS3动画属性“@keyframes ”可实现动态特效，大部分主流浏览器都支持，在火狐24版、chrome29版、IE10中测试通过。IE9以下浏览不支持此特效。http://www.newsky365.com/webcssdanru/ <无>

源码与演示：源码出处 演示出处

@keyframes fade-in {  
    0% {opacity: 0;}/*初始状态 透明度为0*/  
    40% {opacity: 0;}/*过渡状态 透明度为0*/  
    100% {opacity: 1;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fade-in {/*针对webkit内核http://www.newsky365.com/*/  
    0% {opacity: 0;}  
    40% {opacity: 0;}  
    100% {opacity: 1;}  
}  
#content {  //换为自己主题的区域ID  
    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;  
}