CSS動畫autroscrolling文本問題

我有一個autoscrolling文本，問題是動畫重新開始之前div是完整的。CSS動畫autroscrolling文本問題

你可以看看這裏：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」再次重新啓動。我該怎麼做？

來源

2017-01-16 Federico

您只需增加動畫在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; 
}

來源

2017-01-16 10:57:17 Callum

感謝@CallumErrington，如果我希望動畫結束的確切時間，工程吃上一頓美味，但什麼最後一封信已經通過了瀏覽器的頂部？這是純粹的CSS可行嗎？ – Federico

@Federico它只是一個混淆動畫值的問題。因此，如果你做@ GL.awog所說的話，那似乎是一種更好的方式來做到這一點，並嘗試'0％{transform：translateY（50％）; }'擺脫延遲。 – Callum

在這種情況下，你最好使用變換

：翻譯，而不是邊距，因爲前者適用於目標（#box）的邊框，而後者則是容器的大小。

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

demo

和版本，而「迭代之間的延遲」

demo2

來源

2017-01-16 11:11:19

非常感謝你的工作！爲什麼重新啓動有延遲？有什麼我可以做的，以加快重啓？ – Federico

https://jsfiddle.net/2oLf47o9/16/我將margin-top作爲初始靜態值返回 –

CSS動畫autroscrolling文本問題

回答

相關問題