动画在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>
我相信你需要为所有关键帧值使用相同的单位。您不能拥有%
和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>