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

在这种情况下，最好使用transform：translate而不是margin-top，因为前者适用于目标（#box）的边界框，而后者适用于容器大小。

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

演示

和版本不包含“迭代之间的延迟”

演示2

Answer 2

您只需要增加动画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;
}