Javascript 缩放Firefox时关键帧动画闪烁

嗨，我创建了一个在不同设备上以不同分辨率运行的游戏。因此，为了调整分辨率，我使用动态css缩放，因此由于缩放，我的关键帧动画在firefox上大量闪烁。精灵动画在div背景imgae中使用。请帮我摆脱这一切。 以下是动画的源代码和url：

请在firefox中打开它

---

添加

-webkit变换样式：preserve-3d

或

-moz变换样式：preserve-3d样式到闪烁元素的容器。到
class=“container”
在您的情况下，它包含
.boboFeather
元素。
感谢您的帮助。为什么它不工作。boboFeather容器。如果可以的话，请给我解释一下。Thanks@RaghvendraSingh它应用于容器并设置子元素的行为
.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;
}
}