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


Shadows
Auteur
Réponse acceptée

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,

Voir caniuse, known issues point 3.

Shadows
Auteur

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é.

Shadows
Auteur

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

Merci pour la soluce ;)