CSS background-image Crossfade

Question

I created this crossfade:

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

and here is the 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;
}
}

The problem I am facing is, The text is fading away with the crossfade, I want it to be fixed without fading out with the images!

Plus, when the site load, you'll see the image fading in right away, I don't want the animation to start until after 3 seconds...

Plus, when you look at the crossfade, after every slide, it displays a white background, I think the class .home is responsible for that! how do I fix it?

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>