CSS动画自动滚动文本问题

Question

I have a autoscrolling text, the problem is that the animation restart before the div is complete.

You can have a look here: https://jsfiddle.net/2oLf47o9/2/

Here it is the animation part

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

I want to letters to scroll till the "Z" and restart again from the "A". How can I do that?

Answer 1

in this case you'd better use transform:translate instead of a margin-top, since the former applies to the bounding box of a target (#box), while the latter to the container size.

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

demo

and version without "delays between iterations"

demo2

Answer 2

You just need to increase the margin height that the animation expects to reach when it is 100% complete. In this case the CSS that sets that is:

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

So you just have to change the margin the 100% version of the animation expects to something higher(and with the way vh units work this means setting the value lower), -200vh worked nicely when I tested the example.

Changed code would be:

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