CSSアニメーションは時間ではなく速度に基づいていますか？

Question

私は、次の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％以上変化することがあります。小さなサイズでコンテンツをアニメートすると、スクロールが非常に遅くなります。反対の場合は真です。

誰かが私が見ている可能性のある解決策を考えてもらえますか？

Answer 1

完全な解決策ではありませんが、コンテンツがビューポートサイズに基づいている場合は、メディアクエリでanimation-durationを更新して値を増減できます。