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?
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%);
}
}
and version without "delays between iterations"
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.