Текст автоматический прокрутки div останавливается до начала

Question

Я пытаюсь создать автоматическую прокрутку div без javaScript, но в настоящее время он останавливается слишком рано. У меня моя анимация снижается на 100%, но это даже не близко к концу.

Вот CSS. Div является динамическим. Иногда div действительно большой с несколькими пролетами, иногда его всего несколько. Вот почему я попытался использовать -100%.

.question{ 
    -webkit-animation: moveDiv 25s linear infinite; 
} 


@-webkit-keyframes moveDiv { 
    from {margin-top: 60vh;} 
    to {margin-top: -100%;} 
    } 

Вот мой plnkr https://plnkr.co/edit/c7TiOH5LgUiqWmbUzPdb?p=preview

Answer 1

Это будет мой быстрый ответ для вас:

@-webkit-keyframes moveDiv { 
    from {-webkit-transform: translateY(60px);    } 
    to { -webkit-transform: translateY(calc(-100% - 200px));} 
} 

transform является идеальным свойство для анимации. Процент в transform принимает процент элемента, тогда как процент для margin относится к ширине содержащего блока (согласно mozilla developer).

/* Styles go here */ 
 

 
#finish{ 
 

 
    text-align:center; 
 
} 
 

 
#message{ 
 
    margin-top:20px;; 
 
    color:green; 
 
    font-size:60px; 
 
    text-align:center; 
 
} 
 

 
#main{ 
 
    margin:40px; 
 
    text-align:center; 
 
} 
 

 
#Questions{ 
 
    /*overflow:scroll;*/ 
 
    overflow:hidden; 
 
    height:50vh; 
 
    background:rgba(203, 203, 203, 0.44); 
 
    color:white; 
 
    margin-bottom:20px; 
 
} 
 

 
.question{ 
 
    -webkit-animation: moveDiv 14s linear infinite; 
 
} 
 

 
.QDisp{ 
 
    margin-top:2%; 
 
    font-size:50px; 
 
    color:rgb(70, 232, 77); 
 
    margin-bottom:6%; 
 
    text-align:center; 
 
} 
 

 
.ADisp{ 
 
    text-align:center; 
 
    display: block; 
 
    background-color:rgb(255, 103, 98); 
 
    margin: 15px; 
 
    margin-left: 100px; 
 
    margin-right:100px; 
 
    border-radius:25px; 
 
    color:white; 
 
    font-size: 40px; 
 
} 
 

 
.IDisp{ 
 
    margin-top:2%; 
 
    font-size:40px; 
 
    color:rgb(255, 150, 54); 
 
    text-align:center; 
 
    margin-bottom:400px; 
 
} 
 

 

 
@-webkit-keyframes moveDiv { 
 
\t from {-webkit-transform: translateY(60px);} 
 
\t to {-webkit-transform: translateY(calc(-100% - 200px));} 
 
}

<div id="finish"> 
 
    <div id="message"> 
 
    Thank You, we really hope you enjoyed it! 
 
    </div> 
 

 
    <div id="main"> 
 
    <div id="Questions"> 
 
     <div class="question"> 
 
     <span class="Qs"> 
 
      <p class = "QDisp">1 jihasdfjeoihfon ofidsicdsaofnewew diahoshfoow</p> 
 
      <span class = "ADisp">joiasfdioenwowe </span> 
 
     <p class="IDisp">Reflkfasjpwepjiqnpqk;ljrewjlfjejwlejklwwfjk} </p> 
 
     </span> 
 

 

 
     <span class="Qs"> 
 
      <p class = "QDisp">2 jihasdfjeoihfon ofidsicdsaofnewew diahoshfoow</p> 
 
      <span class = "ADisp">joiasfdioenwowe </span> 
 
     <p class="IDisp">Reflkfasjpwepjiqnpqk;ljrewjlfjejwlejklwwfjk} </p> 
 
     </span> 
 

 

 
     <span class="Qs"> 
 
      <p class = "QDisp">3 jihasdfjeoihfon ofidsicdsaofnewew diahoshfoow</p> 
 
      <span class = "ADisp">joiasfdioenwowe </span> 
 
     <p class="IDisp">Reflkfasjpwepjiqnpqk;ljrewjlfjejwlejklwwfjk} </p> 
 
     </span> 
 

 
     <span class="Qs"> 
 
      <p class = "QDisp">4 jihasdfjeoihfon ofidsicdsaofnewew diahoshfoow</p> 
 
      <span class = "ADisp">joiasfdioenwowe </span> 
 
     <p class="IDisp">Reflkfasjpwepjiqnpqk;ljrewjlfjejwlejklwwfjk} </p> 
 
     </span> 
 

 

 
     <span class="Qs"> 
 
      <p class = "QDisp">5 jihasdfjeoihfon ofidsicdsaofnewew diahoshfoow</p> 
 
      <span class = "ADisp">joiasfdioenwowe </span> 
 
     <p class="IDisp">Reflkfasjpwepjiqnpqk;ljrewjlfjejwlejklwwfjk} </p> 
 
     </span> 
 

 
     <span class="Qs"> 
 
      <p class = "QDisp">6 jihasdfjeoihfon ofidsicdsaofnewew diahoshfoow</p> 
 
      <span class = "ADisp">joiasfdioenwowe </span> 
 
     <p class="IDisp">Reflkfasjpwepjiqnpqk;ljrewjlfjejwlejklwwfjk} </p> 
 
     </span> 
 

 

 
     <span class="Qs"> 
 
      <p class = "QDisp">7 jihasdfjeoihfon ofidsicdsaofnewew diahoshfoow</p> 
 
      <span class = "ADisp">joiasfdioenwowe </span> 
 
     <p class="IDisp">Reflkfasjpwepjiqnpqk;ljrewjlfjejwlejklwwfjk} </p> 
 
     </span> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
</div>