javascript - 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%