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

带有动画卷

.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和他们都失败。发生了我不了解的事情，因此正在寻找教育以及可行的解决方案。