CSS3 - 图像幻灯片

我已经设法仅使用CSS3创建幻灯片 . 幻灯片工作顺利而精细 . 但问题是我已经为每个图像定义了一些 Headers ，并且它首次按照图像显示，并且第二次再次显示时，所有 Headers 都会立即显示 .

HTML Code :

<ul class="cb-slideshow">
    <li>
        <span>Image 01</span>
        <div>
            <h3>Header 1</h3>
        </div>
    </li>
    <li>
        <span>Image 02</span>
        <div>
            <h3>Header 2</h3>
        </div>
    </li>
    <li>
        <span>Image 03</span>
        <div>
            <h3>Header 3</h3>
        </div>
    </li>
    <li>
        <span>Image 04</span>
        <div>
            <h3>Header 4</h3>
        </div>
    </li>
</ul>

CSS Code :

.cb-slideshow,
    .cb-slideshow:after {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      list-style: none;
    }
    .cb-slideshow li span {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      background-size: cover;
      background-position: 100%;
      background-repeat: none;
      -webkit-animation: slideshow 32s cubic-bezier(.01,.56,.07,.9) infinite 0s;
    }
    .cb-slideshow li div {
      width: 100%;
      top: 0;
      left: 0;
      font-family: Century Gothic;
      position: absolute;
    }
    .cb-slideshow li div h3 {
      font-size: 100px;
      text-align: center;
      text-transform: uppercase;
      opacity: 0;
      color: #000;
      /*margin: 500px 0 0 35px;*/
      -webkit-animation: slideIn 8s;
    }
    .cb-slideshow li:nth-child(1) span {
      background-image: url(1.jpg);
    }
    .cb-slideshow li:nth-child(2) span {
      background-image: url(2.jpg);
      -webkit-animation-delay: 8s;
    }
    .cb-slideshow li:nth-child(3) span {
      background-image: url(1.jpg);
      -webkit-animation-delay: 16s;
    }
    .cb-slideshow li:nth-child(4) span {
      background-image: url(2.jpg);
      -webkit-animation-delay: 24s;
    }
    .cb-slideshow li:nth-child(2) div h3 {
      -webkit-animation-delay: 8s;
    }
    .cb-slideshow li:nth-child(3) div h3 {
      -webkit-animation-delay: 16s;
    }
    .cb-slideshow li:nth-child(4) div h3 {
      -webkit-animation-delay: 24s;
    }
    @-webkit-keyframes slideshow {
      0% {
        opacity: 1;
        -webkit-transform: translateX(2000px);
      }
      5% {
        opacity: 1;
        -webkit-transform: translateX(0);
      }
      25% {
        opacity: 1;
        -webkit-transform: translateX(0);
      }
      30% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
      }
      35% {
        opacity: 0;
        -webkit-transform: translateX(0);
      }
      50% {
         opacity: 0;
        -webkit-transform: translateX(0);
      }
      75% {
         opacity: 0;
        -webkit-transform: translateX(0);
      }
      100% {
         opacity: 0;
        -webkit-transform: translateX(0);
      }
    }
    @-webkit-keyframes slideIn {
      0% {
        opacity: 1;
        -webkit-transform: translateY(-2000px);
      }
      25% {
        opacity: 1;
        -webkit-transform: translateY(0);
      }
      35% {
        opacity: 1;
        -webkit-transform: translateY(0);
      }
      45% {
        opacity: 1;
        -webkit-transform: translateY(0);
      }
      50% {
         opacity: 1;
        -webkit-transform: translateY(0);
      }
      65% {
         opacity: 1;
        -webkit-transform: translateY(0);
      }
      75% {
         opacity: 1;
        -webkit-transform: translateY(0);
      }
      76% {
         opacity: 1;
        -webkit-transform: translateY(0);
      }
      97% {
         opacity: 1;
        -webkit-transform: translateY(0);
      }
      100% {
        -webkit-transform: scale(1.1) rotate(3deg);
        opacity: 0;
      }
    }

有人请按照图像帮我修复 Headers 的外观 .

提前致谢 .