动画在Firefox中运行得很好,但是当我在Chrome和Chromium上测试它时,它没有用。
where: [service, question] << serviceQuestionsCombinations()
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;
}
}
答案 0 :(得分: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>