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 ^^
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.
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 ?
Re,
Après vérification : codepen fonctionne sous chrome pas sous firefox (derniere version) ;(
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é.