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

Question

这是一个 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;}

animation-roll

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

如您所见，前一个 child 正在覆盖下一个 child。换句话说，当前 child 的持续时间太长，下一个 child.

的持续时间是 stepped-on

如何修改动画使得每个child顺序正确并且没有child与下一个[=36]冲突=]?

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

Answer 1

@keyframes roll中的百分比相互重叠时间child。你只需要给每个人多一些时间 space:

@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 中，每个 child 都显示为 0% 到 17.5%。其余时间是看不见的。这意味着 6.125 秒可见，28.875 秒不可见。

你有 7 children 35 秒。这意味着每个人约5秒。

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

CSS + keyframe: how to change animation speed?

css

keyframe