Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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>

Answer 2

这里提供了真正让人深思的东西：）

我必须为不透明度更改应用2个动画：xfade-25pct和xfade-50pct。两者都只播放了2次，在动画的25％和50％后短暂淡出。还有一个额外的show动画，可以在2个动画循环后使第3个图像保持不变，并具有必要的规则animation-fill-mode: forwards;。

不透明的技巧是：你必须在4个季度中分割动画。如果需要，您可以将总动画持续时间从60s更改为4的倍数，并调整延迟。第3个动画延迟是第2个动画延迟的两倍。

----#----#----#----#----#----#----#----#----#----#
1st animation      | 1st animation     |
--------------------------------------------------
15s | 2nd animation     | 2nd animation     |
--------------------------------------------------
30s      | 3rd animation     |   3rd animation   |
----#----#----#----#----#----#----#----#----#----#

随意问。希望这会对你有所帮助。

＆＃13;

var s = 0,
  c = 1;
/* Code for displaying timer */
window.setInterval(function() {
  s++;
  document.querySelector('DIV').innerHTML = s;
  if (s == 15 && c <= 2 || s == 30) {
    if (s == 30) {
      c = 1;
    } else {
      c++;
    }
    s = 0;
  }
}, 1000);

＆＃13;

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

li {
  position: absolute;
  opacity: 0;
}

li {
  animation: xfade-25pct 60s 2;
}

li:nth-child(2) {
  animation-delay: 15s;
}

li:nth-child(3) {
  animation-delay: 30s, 120s;
  animation-name: xfade-50pct, show;
  animation-duration: 60s, 1s;
  animation-iteration-count: 2, 1;
  animation-fill-mode: forwards;
}

@keyframes xfade-25pct {
  0% {
    opacity: 0;
  }
  2%,
  25% {
    opacity: 1;
  }
  27% {
    opacity: 0;
  }
}

@keyframes xfade-50pct {
  0% {
    opacity: 0;
  }
  2%,
  50% {
    opacity: 1;
  }
  52% {
    opacity: 0;
  }
}

@keyframes show {
  0%,
  100% {
    opacity: 1;
  }
}

＆＃13;

<DIV></DIV>
<ul>
  <li><img width="500" height="500" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="pic1"></li>
  <li><img width="500" height="500" src="http://whc.unesco.org/uploads/thumbs/news_920-500-500-20151015155516.jpg" alt="pic2"></li>
  <li><img width="500" height="500" src="https://i.pinimg.com/736x/4c/17/65/4c176537aee906de294138c3bac5b8f5--merry-christmas-love-coffee-aroma.jpg" alt="pic3"></li>
</ul>

＆＃13;

CSS动画延迟和关键帧

2 个答案: