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