テキスト自動スクロール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 { 
 
\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>