CSSアニメーションオートスキャンのテキストの問題

Question

私は自動スクロールのテキストを持っていますが、問題は、divが完了する前にアニメーションが再開してしまうことです。あなたがここに見ることができ

：https://jsfiddle.net/2oLf47o9/2/

をここでは、アニメーションの一部

-webkit-animation-name: move; 
-webkit-animation-duration: 5s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: up; 
-webkit-animation-timing-function: linear; 

である私は、「Z」までスクロールして、「A」からもう一度再起動するように文字にしたいです。 どうすればいいですか？

Answer 1

アニメーションが100％完了したときに到達すると予想されるマージンの高さを増やしてください。この場合、これを設定し、CSSは次のとおりです。

@-webkit-keyframes move { 
    0% { /* Start of the animation */ 
     margin-top: 100vh; 
    } 
    100% { /* End of the animation */ 
     margin-top: -100vh; 
    } 
} 

だから、あなただけのアニメーションの100％バージョンが高い何か（にとVHユニットは、これは低い値を設定することを意味作業方法と見込んマージンを変更する必要があります）、-200vhは私がこの例をテストしたときうまくいった。

変更されたコードは次のようになります。

あなたはより良い変換を用いるだろう。この場合、

100% { /* End of the animation */ 
    margin-top: -200vh; 
} 

Answer 2

：前者はターゲットのバウンディングボックス（#box）に適用されることから、マージントップの代わりに翻訳し、後者は容器の大きさに相当する。

"反復間の遅延" のない

@-webkit-keyframes move { 
    0% { 
     transform:translateY(100%); 
    } 
    100% { 
     transform:translateY(-100%); 
    } 
} 

demo

とバージョン

demo2