基于速度而不是时间的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动画？

回答

相关问题