html - CSS 背景图像淡入淡出

Question

我创建了这个淡入淡出：

<!--- Home --->
    <div class="container-fluid home" id="home">
      <section class="row">
        <div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
          <h1 class="main">urbanphenomena</h1>
          <h1 class="sub-main">design+research</h1>
        </div>
      </section>
        </div>
        <!---------- CrossFade ---------->
      <div class="crossfade">
        <figure></figure>
        <figure></figure>
        <figure></figure>
        <figure></figure>
      </div>

这是CSS：

/*********** CrossFade Images ***********/
.crossfade > figure:nth-child(1) {
  animation-delay: 0s;
  background-image: url('https://dw9to29mmj727.cloudfront.net/misc/newsletter-naruto3.png');
}

.crossfade > figure:nth-child(2) {
  animation-delay: 9s;
  background-image: url('https://images3.alphacoders.com/671/671375.png');
}

.crossfade > figure:nth-child(3) {
  animation-delay: 15s;
  background-image: url('http://www.zebumob.com/i/2017/02/naruto-hokage-wallpapers-1080p.jpg');
}

.crossfade > figure:nth-child(4) {
  animation-delay: 21s;
  background-image: url('http://2.bp.blogspot.com/-Rp2zvt0SBnI/VCgqHtHTi8I/AAAAAAAAABc/HooancZAvVA/s1600/naruto_angry.jpg');
}

/*********** CrossFade Animation ***********/
@keyframes 
imageAnimation {  0% {

 opacity: 0;
}
 8% {
 opacity: 1;
}
 17% {
 opacity: 1;
}
 25% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

我面临的问题是，文本随着交叉淡入淡出，我希望它被修复而不随着图像淡出！

另外，当网站加载时，你会看到图像立即消失，我不希望动画在 3 秒后开始......

另外，当您查看交叉淡入淡出时，在每张幻灯片之后，它都会显示白色背景，我认为 .home 类对此负责！我如何解决它？

body, html {
    overflow-x:hidden;
}

/*********** CrossFade ***********/
.crossfade > figure {
  animation: imageAnimation 30s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}

/*********** CrossFade Images ***********/
.crossfade > figure:nth-child(1) {
  animation-delay: 0s;
  background-image: url('https://dw9to29mmj727.cloudfront.net/misc/newsletter-naruto3.png');
}

.crossfade > figure:nth-child(2) {
  animation-delay: 9s;
  background-image: url('https://images3.alphacoders.com/671/671375.png');
}

.crossfade > figure:nth-child(3) {
  animation-delay: 15s;
  background-image: url('http://www.zebumob.com/i/2017/02/naruto-hokage-wallpapers-1080p.jpg');
}

.crossfade > figure:nth-child(4) {
  animation-delay: 21s;
  background-image: url('http://2.bp.blogspot.com/-Rp2zvt0SBnI/VCgqHtHTi8I/AAAAAAAAABc/HooancZAvVA/s1600/naruto_angry.jpg');
}

/*********** CrossFade Animation ***********/
@keyframes 
imageAnimation {  0% {
 
 opacity: 0;
}
 8% {
 opacity: 1;
}
 17% {
 opacity: 1;
}
 25% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

/*********** General Settings ***********/
.home {
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
    padding: 9em 0 45em 0;
    color: white;
}

h2 {
    font-weight:600;
}
/*********** Home ***********/
.home h1 {
    font-family: 'Open Sans';
    font-size: 5em;
}

.main {
    text-shadow: 0px 0px 10px #696969;
    color: #f6f6f6; 
    font-weight: 900;
}

.sub-main {
    font-weight: 100;
    color: white;
    text-shadow: 0px 0px 50px #696969 !important;
}

<!--- Home --->
    <div class="container-fluid home" id="home">
      <section class="row">
        <div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
          <h1 class="main">urbanphenomena</h1>
          <h1 class="sub-main">design+research</h1>
        </div>
      </section>
        </div>
        <!---------- CrossFade ---------->
      <div class="crossfade">
        <figure></figure>
        <figure></figure>
        <figure></figure>
        <figure></figure>
      </div>