@keyframes动画中的Z-index变化导致弹出

Question

我希望每个<div>在淡出前保持在屏幕上8秒。

此外，我希望他们互相褪色，反对褪色到黑色，然后其他渐渐消失。

这非常感谢@giovannipds，除了一个流行音乐，而不是8秒的屏幕。如果删除z-index更改，则转换为干净。

.slider {
        line-height: 1.5;
        height: 200px;
        margin: 20px auto;
        position: relative;
        width: 300px;
      }
      .slide {
        padding: 20px;
        position: absolute;
        width: 100%;
        height: 100%;
      }
      .slide,.slide a {
        color: #fff;
      }
      .slide1 {
        animation: fade 8s infinite;
        background: red;
      }
      .slide2 {
        animation: fade2 8s infinite;
        background: blue;
      }
      @keyframes fade
      {
        0% { opacity: 1 ; z-index: 2; }
        33.333% { opacity: 0; z-index: 1; }
        66.666% { opacity: 0; z-index: 1; }
        100% { opacity: 1; z-index: 2; }
      }
      @keyframes fade2
      {
        0% { opacity: 0; z-index: 1; }
        33.333% { opacity: 1; z-index: 2; }
        66.666% { opacity: 1; z-index: 2; }
        100% { opacity: 0; z-index: 1; }
      }

<div class="slider">
      <div class="slide slide1">
        <ul>
          <li><a href="//www.google.com" target="_blank">Google</a></li>
          <li><a href="//www.globo.com" target="_blank">Globo.com</a></li>
        </ul>
      </div>
      <div class="slide slide2">
        <ul>
          <li><a href="//www.lovemondays.com.br" target="_blank">Love Mondays</a></li>
          <li><a href="//www.hotmail.com" target="_blank">Hotmail</a></li>
        </ul>
      </div>
    </div>