CSS动画延迟和关键帧

Question

我对CSS动画的动画延迟有问题.我有3张图片,我想幻灯片播放.插图是,图像1到图像2需要15秒才能改变,图像2到图像3需要15秒才能改变,图像3要回到图像1需要30秒,在第一次循环之后,我想让幻灯片结束图像3使图像1到图像2仍然是15秒,图像2到图像3仍然是15秒,当图像3加载时,无需返回到图像1.我尝试了这个代码,但它给了我15秒的延迟到所有图像.这是我的代码:

ul {
      list-style: none;
      margin: 0;
      padding: 0;
      position: relative;
    }
    
    li {
      position: absolute;
      opacity:0;
    }
    
    li {
      animation: xfade 45s  infinite;
    }
    li:nth-child(2) {
      animation-delay:15s;
    }
    li:nth-child(3) {
      animation-delay:30s;
    }
    
    @keyframes xfade{ 
      3%{opacity:1}
      33% {opacity:1;}
      36%{opacity:0}
    }

    <ul>
      <li><img width="500" height="500" src="http://lorempixel.com/500/500/sports" alt="pic1"></li>
      <li><img width="500" height="500" src="http://lorempixel.com/500/500/people" alt="pic2"></li>
      <li><img width="500" height="500" src="http://lorempixel.com/500/500/transport" alt="pic3"></li>
    </ul>

我想根据上面的插图延迟我的动画.任何人都可以帮我解决这个问题？谢谢你.

Answer 1

我认为如果你想要像这样的特定场景的动画，使用 GreenSock 会更好。

这是我能得到的最接近的 HTML 和 CSS，我还需要复制它<li>以适合您的场景。

ul {
      list-style: none;
      margin: 0;
      padding: 0;
      position: relative;
    }
    
    li {
      position: absolute;
      opacity: 0;
    }
    
    li:nth-child(6) {
      /*The last item always on the top, direction will goes from last to first*/
      animation: xfade 15s;
    }
    li:nth-child(5) {
      /*Put animation length double the delay (in this case delay is the actual animation length)*/
      animation: xfade 30s 15s;
    }
    li:nth-child(4) {
      animation: xfade 30s 15s;
    }
    li:nth-child(3) {
      animation: xfade 30s 15s;
    }
    li:nth-child(2) {
      animation: xfade 30s 15s;
    }
    li:nth-child(1) {
      opacity: 1;
    }
    
    @keyframes xfade{ 
      0%{opacity:0}
      33% {opacity:1;}
      100%{opacity:0}
    }

<ul>
      <li>1<img width="500" height="500" src="http://lorempixel.com/500/500/sports" alt="pic1"></li>
      <li>2<img width="500" height="500" src="http://lorempixel.com/500/500/people" alt="pic2"></li>
      <li>3<img width="500" height="500" src="http://lorempixel.com/500/500/transport" alt="pic3"></li>

      <!-- Duplicate -->
      <li>4<img width="500" height="500" src="http://lorempixel.com/500/500/sports" alt="pic1"></li>
      <li>5<img width="500" height="500" src="http://lorempixel.com/500/500/people" alt="pic2"></li>
      <li>6<img width="500" height="500" src="http://lorempixel.com/500/500/transport" alt="pic3"></li>
    </ul>