您好,我创建了一款可以在不同分辨率的不同设备上运行的游戏。所以为了调整分辨率,我使用动态 css 缩放,所以由于缩放我的关键帧动画在 firefox 上大量闪烁。 Sprite 动画在 div background-imgae 中使用。请帮我摆脱这个。 下面是动画的源代码和url:
请用firefox打开
https://trcdev.oupchina.com.hk/test/kg_game3/#/home
.boboFeather {
background-image: url(‘../../assets/images/home/boboFeather.png’);
background-repeat: no-repeat;
width: 460px;
height: 489px;
position: absolute;
right: 250px;
bottom: 30px;
animation: BoboFeatherAnim 2s steps(14) infinite;
-webkit-animation: BoboFeatherAnim 2s steps(14) infinite;
-moz-animation: BoboFeatherAnim 2s steps(14) infinite;
-ms-animation: BoboFeatherAnim 2s steps(14) infinite;
-o-animation: BoboFeatherAnim 2s steps(14) infinite;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
@keyframes BoboFeatherAnim {
from {
background-position: 0px;
}
to {
background-position: -6440px;
}
}
@-moz-keyframes BoboFeatherAnim {
from {
background-position: 0px;
}
to {
background-position: -6440px;
}
}
@-ms-keyframes BoboFeatherAnim {
from {
background-position: 0px;
}
to {
background-position: -6440px;
}
}
@-o-keyframes BoboFeatherAnim {
from {
background-position: 0px;
}
to {
background-position: -6440px;
}
}
@-webkit-keyframes BoboFeatherAnim {
from {
background-position: 0px;
}
to {
background-position: -6440px;
}
}
最佳答案
将-webkit-transform-style: preserve-3d;
或-moz-transform-style: preserve-3d;
样式添加到闪烁元素的容器中。在您的情况下,class="container"
包含 .boboFeather
元素。
关于javascript - 缩放 Firefox 时关键帧动画闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51436864/