文本自动滚动div停止到早期

Question

我正在尝试在没有javaScript的情况下创建自动滚动div，但目前它停止得太早。我的动画下降了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 {
	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>