javascript - 缩放 Firefox 时关键帧动画闪烁

Question

嗨，我创建了一个可以在不同设备上以不同分辨率运行的游戏。所以要调整分辨率，我正在使用动态 css 缩放，所以由于缩放，我的关键帧动画在 Firefox 上大量闪烁。sprite 动画在 div background-imgae 中使用。请帮助我摆脱这种情况。下面是动画的源代码和url：

请用火狐打开。

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;
}
}

标签： javascripthtmlcsscss-animationsscaling

Answer 1

向闪烁元素的容器添加-webkit-transform-style: preserve-3d;或设置样式。-moz-transform-style: preserve-3d;在class="container"您的情况下，它包含.boboFeather元素。