Text automatic scrolling div stops to early - html

Question

I am trying to create a automatic scrolling div without javaScript, but currently it stops too early. I have my animation going down 100% but this isn't even close to the end.
Here is the CSS. The div is dynamic. Sometimes the div is really big with multiple span, sometimes its only a few, That's why I tried to use -100%.
.question{
-webkit-animation: moveDiv 25s linear infinite;
}
#-webkit-keyframes moveDiv {
from {margin-top: 60vh;}
to {margin-top: -100%;}
}
Here is my plnkr
https://plnkr.co/edit/c7TiOH5LgUiqWmbUzPdb?p=preview

Answer 1

This would be my quick answer for you:
#-webkit-keyframes moveDiv {
from {-webkit-transform: translateY(60px); }
to { -webkit-transform: translateY(calc(-100% - 200px));}
}
transform is the perfect property for animations. The percentage in transform takes the percentage of the element, whereas the percentage for margin refer to the width of the containing block (according to 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 {
from {-webkit-transform: translateY(60px);}
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>