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

Question

I'm trying to make a list of 100 paragraphs repeatedly scroll up, but the animation is restarting before the list finishes scrolling, at about 48 paragraphs. How can I make sure that all paragraphs scroll before the animation restarts?

 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

Your problem lies with top/bottom being related to the height of the screen, since the div is longer than those dimensions, it won't work.

I think I found a good solution, using only CSS.

Animating the top/bottom values is impossible, since CSS animations require their exact counterpart to animate, however, there is a property we can use to animate based on the entire height of the element

Introducing: 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> 

The magic happens in these lines:

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

Instead of animating offset, we're animating the element's position on the X axis of the screen. Making it -100% of it's actual height, and then animating it to 100% of it's actual height, effectively animating it offscreen before it repeats.

You just need to decide where the scrolling up should start, in this example 10%