的CSS淡出标志淡入背景页

Question

我试图使用淡出属性主页上的#logo，并在同一时间淡入到.container（整页）。所以虽然标志正在消失，但它正在填入的主要页面。我尝试了一些我发现但没有成功的代码。有谁知道一些适当的文件来达到它？谢谢

<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

这应该工作。 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; 
}