图片 CSS 过渡问题答案

【问题标题】：Picture CSS Transition issue图片 CSS 过渡问题
【发布时间】：2013-05-28 15:13:45
【问题描述】：

我有一张在四张图片之间转换的幻灯片。我让幻灯片以一定的速度运行，但最后一张幻灯片并没有快速过渡到第一张幻灯片。我试图添加另一个 nth 并且我试图减慢最后 nth 的速度，但它不起作用。我希望整张幻灯片在某个时间过渡，但最后一张幻灯片需要回到第一张幻灯片，而不会出现巨大的黑色延迟。代码如下：

    .picTransition .item {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-animation: picTransition 56s linear infinite;
  -moz-animation: picTransition 56s linear infinite;
  -ms-animation: picTransition 56s linear infinite;
  animation: picTransition 56s linear infinite;
}
.picTransition .item:nth-child(2) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}
.picTransition .item:nth-child(3) {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}
.picTransition .item:nth-child(4) {
  -webkit-animation-delay: 36s;
  -moz-animation-delay: 36s;
  -ms-animation-delay: 36s;
  animation-delay: 36s;
}

@-webkit-keyframes picTransition {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}
@-moz-keyframes picTransition {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}
@-ms-keyframes picTransition {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}
@keyframes picTransition {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}

我在这里做错了什么？

【问题讨论】：

标签： html css animation transition slide

【解决方案1】：

如果你有 4 张图片并且你设置了

animation-delay: 12s;

对于每一个，循环时间为 4 * 12 = 48s。

相反，您的循环时间为 56 秒

animation: picTransition 56s linear infinite;

这意味着结束时有 8 秒的间隔

【讨论】：

这正是问题所在。谢谢你的帮助。我忘了我有56s。细节。谢谢！