CSS淡出徽标淡入背景页面

Question

I'm trying to use the fade-out property on a home page to the #logo and at the same time fade-in to .container (whole page) . So while the logo is fadding out, the main page it's fadding in. I'm trying with some code that I found but no success. Does anyone know some proper documentation for reach it? THANKS

<div class="container">
    <div id="logo" class="animated fadeOut"></div>
</div>

.animated {
    z-index: 0;
    background-image: url(../../static/logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 95px;
    margin-bottom: 60px; -webkit-animation-duration: 5s;
    animation-duration: 5s; -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@ - webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

Answer 1

This should work. HTML:

<div class="animated fadeIn container">
    <div id="logo" class="logo animated fadeOut"></div>
</div>

CSS:

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

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.logo {
    z-index: 0;
    background-image: url(../../static/logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 95px;
    margin-bottom: 60px;
}
.animated{
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}


.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}
.fadeIn {
    -webkit-animation-name: fadeOut;
    animation-name: fadeIn;
    -webkit-animation-direction: reverse; //reverse direction of animation
    animation-direction: reverse;
}