基於速度而不是時間的CSS動畫？

我有以下CSS動畫：基於速度而不是時間的CSS動畫？

.wrapper { 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    width: 400px; 
    margin-left: -200px; 
    font: 300 30px/1 'Open Sans Condensed', sans-serif; 
    text-align: center; 
    text-transform: uppercase; 
    color: #fff; 
    animation: 60s credits linear; 
} 

@keyframes credits { 
    0% { 
    top: 100%; 
    } 
    100% { 
    top: 0px; 
    transform: translateY(-110%); 
    } 
}

我需要改變這個去基於「速度」，而不是「時間」。

我動畫的內容可以改變大小超過1000％。以小尺寸動畫製作內容可能會使其滾動速度非常慢。事實恰恰相反。

任何人都可以想到我可能看過的任何解決方案？

來源

2017-04-27 Dan88

內容大小如何變化？你有演示任何地方嗎？ –

我將文本添加到div，並滾動像電影信用，但名稱的數量，每個在自己的行，可以是一到幾千。我編輯這codepen具有相同的動畫CSS https://codepen.io/webdevhehehe/pen/oWBZYe 你可以看到它加快或減慢大大取決於在div的內容量。 – Dan88

不是一個完整的解決方案，但如果內容基於視口大小，則可以在媒體查詢中更新animation-duration以增加/減少值。

來源

2017-04-27 01:35:02 Tyler

基於速度而不是時間的CSS動畫？

回答

相關問題