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 Transforms(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%