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%);
    }
}

<强> demo

和版本没有“迭代之间的延迟”

<强> demo2

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;
}

CSS动画autroscrolling文本问题

2 个答案: