在所有文本滚动之前，CSS滚动动画重新启动

Question

我正在尝试重复滚动100段的列表，但是在列表完成滚动之前，动画正在重新启动，约为48段。我如何确保在动画重新开始之前所有段落滚动？

div = document.getElementById("titlecontent");
for (c = 0; c < 100; c++) {
  str = c;
  p = document.createElement("p");
  p.innerText = str;
  div.appendChild(p);
}
p = document.createElement("p");
p.innerText = "last p reached";
div.appendChild(p);

#titlecontent {
  position: absolute;
  top: 100%;
  -webkit-animation: scroll 10s linear 0s infinite;
  -moz-animation: scroll 10s linear 0s infinite;
  -ms-animation: scroll 10s linear 0s infinite;
  -o-animation: scroll 10s linear 0s infinite;
  animation: scroll 10s linear 0s infinite;
}
@-webkit-keyframes scroll {
  0% { top: 100%; }
  100% { top: -170%; }
}
@-moz-keyframes scroll {
  0% { top: 100%; }
  100% { top: -170%; }
}
@-ms-keyframes scroll {
  0% { top: 100%; }
  100% { top: -170%; }
}
@-o-keyframes scroll {
  0% { top: 100%; }
  100% { top: -170%; }
}
@keyframes scroll {
  0% { top: 100%; }
  100% { top: -170%; }
}

<div id="titlecontent"></div>

Answer 1

您的问题在于顶部/底部与屏幕高度相关，因为div比这些维度长，因此它不起作用。

我认为我只使用CSS找到了一个很好的解决方案。

使顶部/底部值动画是不可能的，因为CSS动画要求其确切的对应物来动画，但是，我们可以根据元素的整个高度

来使用一个属性来动画

介绍：CSS变换（Translatex）。

div = document.getElementById("titlecontent");
for (c = 0; c < 100; c++) {
  str = c;
  p = document.createElement("p");
  p.innerText = str;
  div.appendChild(p);
}
p = document.createElement("p");
p.innerText = "last p reached";
div.appendChild(p);

body {
    overflow: hidden;
}
body {
    overflow: hidden;
}
#titlecontent {
  animation: scroll 20s linear 0s infinite;
}
@-webkit-keyframes scroll {
  0% { transform: translateY(10%); }
  100% { transform: translateY(-100%); }
}

<div id="titlecontent"></div>

魔术发生在这些行中：

  0% { transform: translateY(10%); }
  100% { transform: translateY(-100%); }

我们不是在偏移量的情况下进行动画偏移，而是在屏幕X轴上的位置动画。将其占实际高度的-100％，然后将其动画为100％的实际高度，在重复之前有效地将其放在屏幕上。

您只需要确定滚动应该从哪里开始，在此示例10％