CSS animation scrolling resumes before all text scrolls

Question

I'm trying to make a list of 100 paragraphs scroll up many times, but the animation restarts before the list completes scrolling, by about 48 paragraphs. How can I make sure that all paragraphs scroll until 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 is that the top / bottom is related to the height of the screen, since div longer than these sizes, this will not work.

I think I found a good solution using only CSS.

Animation of upper / lower values ​​is not possible, since CSS animation requires their exact analogue for animation, however there is a property that we can use for animation 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 the displacement, we animate the position of the element on the X axis of the screen. By doing this -100% of the actual height, and then animating it to 100% of its actual height, effectively animating it off-screen before repeating.

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