Html 背景图像交叉淡入淡出

我创建了这个交叉淡入淡出：

<!--- 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>

我面临的问题是，文本随着交叉淡入淡出而淡出，我希望它在不随图像淡出的情况下得到修复

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

另外，当你看交叉渐变时，在每张幻灯片之后，它都会显示一个白色背景，我认为这是班级的责任！ 我怎么修理它

body，html{
溢出x：隐藏；
}
/***********交叉衰落***********/
.crossfade>图{
动画：imageAnimation 30s线性无限0s；
背面可见性：隐藏；
背景尺寸：封面；
背景位置：中心；
颜色：透明；
身高：100%；
左：0px；
不透明度：0；
位置：绝对位置；
顶部：0px；
宽度：100%；
z指数：0；
}
/***********交叉淡入淡出图像***********/
.crossfade>图：第n个子项（1）{
动画延迟：0s；
背景图像：url（'https://dw9to29mmj727.cloudfront.net/misc/newsletter-naruto3.png');
}
.crossfade>图：第n个子项（2）{
动画延迟：9秒；
背景图像：url（'https://images3.alphacoders.com/671/671375.png');
}
.crossfade>图：第n个子项（3）{
动画延迟：15秒；
背景图像：url（'http://www.zebumob.com/i/2017/02/naruto-hokage-wallpapers-1080p.jpg');
}
.crossfade>图：第n个子项（4）{
动画延迟：21秒；
背景图像：url（'http://2.bp.blogspot.com/-Rp2zvt0SBnI/VCgqHtHTi8I/AAAAAAAAABc/HooancZAvVA/s1600/naruto_angry.jpg');
}
/***********交叉淡入淡出动画***********/
@关键帧
图像动画{0%{
不透明度：0；
}
8% {
不透明度：1；
}
17% {
不透明度：1；
}
25% {
不透明度：0；
}
100% {
不透明度：0；
}
}
/***********一般设置***********/
.家{
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
填充：9em0 45em0；
颜色：白色；
}
氢{
字号：600；
}
/***********家***********/
.home h1{
字体系列：“开放式SAN”；
字号：5em；
}
梅因先生{
文本阴影：0px 0px 10px#6969；
颜色：#f6f6f6；
字号：900；
}
.次干管{
字号：100；
颜色：白色；
文本阴影：0px 0px 50px#696969！重要；
}

城市现象
设计+研究

你可以直接用JavaScription停止它的动画制作，你能告诉我怎么做吗？因为我很难将CSS与JStry

h1{z-index:100；}

链接，以使文本足够轻松地显示在图像前面，所以我遇到了一个类似的问题：-您可以忽略所有cookies位，不要认为您需要它们z-index不起作用，即使使用！重要的

/*********** 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;
}
}