代码很简单，如下：

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

其中 #wrapper 改为你要实现效果的id 或者 class

比如 #main ,  用于侧边栏 #sidebar 也可以

#sidebar {
animation: fade-in;/*动画名称*/
animation-duration: 1.5s;/*动画持续时间*/
-webkit-animation:fade-in 1.5s;/*针对webkit内核*/
}

淡入时间也可以修改，看注释就明白了。