html - 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>