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

我需要根据＆＃39; speed＆＃39;来改变它。而不是＆＃39;时间＆＃39;。

我制作动画的内容可以改变1000％以上。以小尺寸动画内容可以使其滚动非常慢。反之亦然。

任何人都可以想到我可能已经查看过的任何解决方案吗？

Answer 1

不是完整的解决方案，但如果内容基于视口大小，您可以在媒体查询中更新animation-duration以增加/减少值。