CODEWITHSUNDEEP
javascripthtmlcsscss-animationsscaling
Raghvendra Singh
Raghvendra Singh

Reputation: 1

Keyframe animation flickering on scaling Firefox

Hi i have created a game which runs on different devices on different resolutions. so to adjust the resolution i am using dynamic css scaling , so due to scaling my keyframe animation is flickering massively on firefox. The sprite animation is used within a div background-imgae. Please help me to get rid out of this. Below is the source code and url of animation:

Please open it in 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;
}
}

Upvotes: 0

Views: 845

Answers (1)

Makarov Sergey
Makarov Sergey

Reputation: 932

Add -webkit-transform-style: preserve-3d; or -moz-transform-style: preserve-3d;style to the container of a flickering element. To class="container" in your case, that contains .boboFeather element.

Upvotes: 1

Related Questions