body{

-webkit-animation: bgbody 3s ease;
-o-animation: bgbody 3s ease;
animation: bgbody 3s ease;

}
@keyframes bgbody {

0%{
    opacity: 0;
    background-color: #ffffff;
}
100%{
    opacity: 1;
}

}

完整实例
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>

</head>
<style>

@keyframes fadein{
    0%{opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@-webkit-keyframes fadein{
    0%{opacity: 0;
    }
    100%{
        opacity: 1;

    }
}
@-moz-keyframes fadein{
    0%{opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@-o-keyframes fadein{
    0%{opacity: 0;
    }
    100%{
        opacity: 1;

    }
}
@-ms-keyframes fadein{
    0%{opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
body{
    animation:fadein 5s linear 1;
    -webkit-animation:fadein 5s linear 1;
    -moz-animation:fadein 5s linear 1;
    -o-animation:fadein 5s linear 1;
    -ms-animation:fadein 5s linear 1;
}

</style>
<body>
CSS3 实现网页的淡入效果
</body>
</html>