Problème animation steps Firefox

Par Shadows, il y a 11 ans

Les bases HTML/CSS

Problème d'animation steps() sur Firefox

Bonjour,
je viens vers vous car je n'ai pas trouvé de solutions à mon problème. En fait j'aimerais animé un sprite grâce à steps() et aux keyframes. Ce que j'ai fait est parfaitement fonctionnel sur Chrome, Opera et Safari (pas testé sur IE) mais pas sur Firefox. Voici là ou ça a l'air de planter :

/* Standing Akuma */ .gouki.standing { /*background-position: -1312px 0;*/ -webkit-animation: goukiAnimationStanding .3s steps(2) infinite; -moz-animation: goukiAnimationStanding .3s steps(2) infinite; -o-animation: goukiAnimationStanding .3s steps(2) infinite; animation: goukiAnimationStanding .3s steps(2) infinite; } @-webkit-keyframes goukiAnimationStanding { from { background-position-x: -1316px; } to { background-position-x: -1502px; } } @-moz-keyframes goukiAnimationStanding { from { background-position-x: -1316px; } to { background-position-x: -1502px; } } @-o-keyframes goukiAnimationStanding { from { background-position-x: -1316px; } to { background-position-x: -1502px; } } @keyframes goukiAnimationStanding { from { background-position-x: -1316px; } to { background-position-x: -1502px; } }

Si vous avez une idée je suis preneur ^^

7 réponses

green68, il y a 11 ans

Bonjour,

Voir caniuse, known issues point 3.

Shadows, il y a 11 ans

Bonjour !

"@keyframes not supported in an inline or scoped stylesheet in Firefox" je n'ai pas vraiment compris ce que ça signifiait. Pourriez-vous m'éclairer ?

green68, il y a 11 ans

Re,
Après vérification : codepen fonctionne sous chrome pas sous firefox (derniere version) ;(

betaWeb, il y a 11 ans

J'ai l'impression que plus ça va, moins Firefox est performant. C'est d'autant plus flagrant sous Linux où le Javascript est très mal géré.

Shadows, il y a 11 ans

Ah c'est chaud... Du coup pas de solutions alternatives ? :/

Shadows, il y a 11 ans

Oyé oyé !

J'ai finalement trouvé la réponse. En fait ça vient de background-position-x qui ne fonctionne pas sur Firefox. Il faut donc remplacer ça par background-position.

green68, il y a 11 ans

Merci pour la soluce ;)