CSS + 关键帧：如何改变动画速度？答案

【问题标题】：CSS + keyframe: how to change animation speed?CSS + 关键帧：如何改变动画速度？
【发布时间】：2019-08-19 21:44:12
【问题描述】：

这是一个CodePen，它使用nth-child 为滚动列表设置动画。

这里是相关的 CSS：

.element:nth-child(1){animation-delay:0s;opacity:0;}
.element:nth-child(2){animation-delay:5s;opacity:0;}
.element:nth-child(3){animation-delay:10s;opacity:0;}
.element:nth-child(4){animation-delay:15s;opacity:0;}
.element:nth-child(5){animation-delay:20s;opacity:0;}
.element:nth-child(6){animation-delay:25s;opacity:0;}
.element:nth-child(7){animation-delay:30s;opacity:0;}

带有动画滚动

.element{grid-column:1/-1; grid-row:1/-1; margin-right:auto; animation:roll 35s cubic-bezier(.25,.1,.25,1) 1s infinite backwards;}

如您所见，前一个孩子正在覆盖下一个孩子。换句话说，当前孩子的持续时间太长，被下一个孩子踩到了。

如何修改动画以使每个孩子都正确排序并且没有孩子与下一个孩子冲突？

注意：我花了几个小时尝试了 animation-delay 和 animation:roll 的许多不同组合，但都失败了。正在发生其他一些我不明白的事情，所以我正在寻找教育和可行的解决方案。

【问题讨论】：

我用它玩了一点，它看起来每 9 秒运行一次，而不是你给它的 5 秒。如果你将时间间隔到 9 秒，那么你应该没问题。
确认，您建议：0 9 18 27 36 45 54。animation:roll 的时间是几点？
是的，将其更改为 9 animation:roll 35s 的倍数，如果您使用那么多，则为 animation:roll 63s。否则，您需要将 Keyframe 更改为滚动
相关（但通过 jQuery） - stackoverflow.com/questions/20340112

标签： css keyframe

【解决方案1】：

@keyframes roll 中每个其他孩子重叠时间的百分比。你只需要给每个人更多的时间空间：

@keyframes roll {
    0% {
        opacity: 0;
        transform: translate3d(0, -70%, 0);
    }
    2.5%, 12.5% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
  } 17.5%, 100% {
        opacity: 0;
        transform: translate3d(0, 70%, 0);
  }
}

总动画时间为 35 秒。现在，在@keyframes roll 中，每个孩子的显示率从 0% 到 17.5%。其余时间是看不见的。这意味着 6.125 秒可见和 28.875 秒不可见。

你有 7 个孩子 35 秒。这意味着每个人大约需要 5 秒。

【讨论】：

好的，我们有一个版本可以运行。我将使用您的代码更新 codepen 示例并接受答案。