带有动画延迟淡出效果的纯CSS幻灯片

Question

我有一个纯CSS幻灯片工作在“自动播放”：小提琴。我想将此幻灯片转换为使用按钮，只使用CSS，并使用此HTML：

   <label for="button-4" class="button-label-4"></label>
   <label for="button-1" class="sp-arrow sp-a1"></label>
   <label for="button-2" class="sp-arrow sp-a2"></label>
   <label for="button-3" class="sp-arrow sp-a3"></label>
   <label for="button-4" class="sp-arrow sp-a4"></label>

   <ul class="cb-slideshow">
      <li>
         <span>Image 01</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
      <li>
         <span>Image 02</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
      <li>
         <span>Image 03</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
      <li>
         <span>Image 04</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
   </ul>

​

你知道我能做什么吗？我试过了，但不起作用。

有关css，请参见小提琴。

Answer 1

我已经更新了代码，现在幻灯片可以使用按钮：小提琴

我已经删除了对animation: imageAnimation 24s linear infinite 0s;在<span>元素(幻灯片显示背景图像)和.cb-slideshow li div上的调用，在这些调用中，一些文本以不同的时间显示在他的背景上。现在我有了自动播放的幻灯片显示(不正确工作的人)和手动切换按钮，他们的工作很好，就像我在我的问题。