为什么我的CSS动画不适用于Chrome / Chromium？

Question

动画在Firefox中运行得很好，但是当我在Chrome和Chromium上测试它时，它没有用。

div.rocket {
  position: relative;
  animation-name: rocket;
  animation-duration: 10s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.9,.03,.69,.22);
  text-align:center;
}
img.rocket {
  height: 5%;
  width: 5%;
}

@keyframes rocket {
  0% {
    top: 140%;
  }
  100% {
    top: 1vh;
  }
}

<div class="rocket">
  <img class="rocket" src="//mason1920.github.io/rocket/img/rocket.svg">
</div>

Answer 1

我相信你需要为所有关键帧值使用相同的单位。您不能拥有%和vh等其他值。这篇css-tricks博客文章可能有所帮助。

div.rocket {
  position: relative;
  animation-name: rocket;
  animation-duration: 10s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.9,.03,.69,.22);
  text-align:center;
}
img.rocket {
  height: 5%;
  width: 5%;
}

@keyframes rocket {
  0% {
    top: 45vh;
  }
  100% {
    top: 1vh;
  }
}

<div class="rocket">
  <img class="rocket" src="//mason1920.github.io/rocket/img/rocket.svg">
</div>