vacillant lors de l'utilisation des images clés + position de fond sur la feuille de sprite dans IE11

Question

J'ai une feuille de sprite contenant 16 images d'une animation de marche et je l'intention de l'animer avec des images clés en changeant la position d'arrière-plan à l'aide:

animation: abc 0.55s infinite steps(1); 


    @keyframes abc { 
     0% {background-position(-2250vh,-10vh);} 
     6.67% {background-position(-2100vh,-10vh);} 
     13.33% {background-position(-1950vh,-10vh);} 
     ... 
     100% {background-position(0,-10vh);} 
    } 

Cela fonctionne très bien en chrome et firefox mais dans IE, à la fin de l'animation, il disparaît brièvement avant de reboucler. Création d'un effet de scintillement

Lorsque j'éteignais les animations et que je teste manuellement chaque position à l'aide de la console, chaque image s'affiche correctement, ce qui n'est pas dû à un positionnement incorrect.

Answer 1

Ne pas animer la position d'arrière-plan. Cela provoque des problèmes de performances. Au lieu de cela, utilisez img et laissez-le être aussi grand que nécessaire. Envelopper dans un div comme si ...

<div class="wrapper"> 
    <img class="image" src='some-tall-image.png'/> 
</div> 

Réglage de la hauteur de wrapper pour être aussi grand que un cadre désiré (A partir de vos images clés i asumed à être 150px). Et mis overflow:hidden sur .wrapper

.wrapper { 
    height:150px; 
    overflow:hidden; 
} 

Cela devrait afficher uniquement ce que vous voulez voir. Une seule image de votre feuille de sprite. Et pour animer l'utilisation transform:translateY() sur le img

@keyframes abc { 
    0% {transform:translateY(-2250vh);} 
    6.67% {transform:translateY(-2100vh);} 
    13.33% {transform:translateY(-1950vh);} 
    100% {transform:translateY(0vh);} 
} 

.image { 
    animation: abc ...; 
} 

EXEMPLE. Check it out ...

En utilisant steps(8) Je n'ai besoin que de définir l'image-clé 100% de l'animation. Le reste est rempli ... MAGIQUE! ... Also created a JSFiddle for ya

J'ai emprunté la feuille de sprite. Props au créateur (dont l'URL peut être vu sur le code). L'image a une largeur de 960 pixels. Donc, dans mon cas, j'ai utilisé translateX au lieu de translateY.

@keyframes walking { 
 
    100% { 
 
    transform:translateX(-960px); 
 
    } 
 
} 
 

 
.wrapper { 
 
    overflow:hidden; 
 
    width:120px; 
 
} 
 

 
.image { 
 
    animation:walking 500ms steps(8) infinite; 
 
}

<div class="wrapper"> 
 
    <img class= "image" src="https://www.adamkhoury.com/demo/sprite_sheets/adam.png"> 
 
</div>