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

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