html - 文本自动滚动 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 中的百分比指的是包含 block 的宽度(根据 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>