.crossfade > div {
    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: fixed;
    top: 0px;
    width: 100%;
    z-index: 0;
  }

  .crossfade {
    height: 500px;
  }
  #fade1{
    background-image: url('../images/taxi.jpg');
  }
  #fade2 {
    animation-delay: 6s;
    background-image: url('../images/default.jpg');
  }
  #fade3 {
    animation-delay: 12s;
    background-image: url('../images/neuroBG.JPG');
  }
  #fade4 {
    animation-delay: 18s;
    background-image: url('../images/new4.jpeg');
  }
  #fade5 {
    animation-delay: 24s;
    background-image: url('../images/new3.jpg');
  }

  #fade6 {
    animation-delay: 30s;
    background-image: url('../images/new1.jpg');
  }

  #fade7 {
    animation-delay: 36s;
    background-image: url('../images/new2.jpeg');
  }

      <div class="crossfade">
            <div id="fade1"></div>
            <div id="fade2"></div>
            <div id="fade3"></div>
            <div id="fade4"></div>
            <div id="fade5"></div>
            <div id="fade6"></div>
            <div id="fade7"></div>
        </div>

Gostaria de fazer uma imagem de fundo aparecer e desaparecer exatamente como este site www.flitways.com

Eu tentei replicar isso, mas as imagens não estão desaparecendo corretamente. Eu apenas sinto que há algo faltando. Apreciará qualquer ajuda com relação a isso. Obrigado.