Probléme d'animation sur firefox

stev -  
Bonjour, j'ai un problème d'animation qui ne s'affiche pas sur firefox :

.hexadecimal{
width: 150px;
height: 220px;
animation: hexad 10s linear 0s infinite;
-moz-animation: hexad 10s linear 0s infinite;
-webkit-animation: hexad 10s linear 0s infinite;
background-size: 100% 100%;
border-radius: 10%;
display: inline-block;
}

@keyframes hexad{
from { background: url("0.jpg"); background-size: 100% 100%;}
6.25% { background: url("0.jpg"); background-size: 100% 100%;}
6.26% {background: url("1.jpg"); background-size: 100% 100%;}
12.5% {background: url("1.jpg"); background-size: 100% 100%;}
12.6% {background: url("2.jpg"); background-size: 100% 100%;}
18.75% {background: url("2.jpg"); background-size: 100% 100%;}
18.76% {background: url("3.jpg"); background-size: 100% 100%;}
25% {background: url("3.jpg"); background-size: 100% 100%;}
25.1% {background: url("4.jpg"); background-size: 100% 100%;}
31.25% {background: url("4.jpg"); background-size: 100% 100%;}
31.26% {background: url("5.jpg"); background-size: 100% 100%;}
37.5% {background: url("5.jpg"); background-size: 100% 100%;}
37.51% {background: url("6.jpg"); background-size: 100% 100%;}
43.75% {background: url("6.jpg"); background-size: 100% 100%;}
43.76% {background: url("7.jpg"); background-size: 100% 100%;}
50% {background: url("7.jpg"); background-size: 100% 100%;}
50.1% {background: url("8.jpg"); background-size: 100% 100%;}
56.25% {background: url("8.jpg"); background-size: 100% 100%;}
56.26% {background: url("9.jpg"); background-size: 100% 100%;}
62.5% {background: url("9.jpg"); background-size: 100% 100%;}
62.51% {background: url("a.jpg"); background-size: 100% 100%;}
68.75% {background: url("a.jpg"); background-size: 100% 100%;}
68.76% {background: url("b.jpg"); background-size: 100% 100%;}
75% {background: url("b.jpg"); background-size: 100% 100%;}
75.1% {background: url("c.jpg"); background-size: 100% 100%;}
81.25% {background: url("c.jpg"); background-size: 100% 100%;}
81.26% {background: url("d.jpg"); background-size: 100% 100%;}
87.5% {background: url("d.jpg"); background-size: 100% 100%;}
87.6% {background: url("e.jpg"); background-size: 100% 100%;}
93.75% {background: url("e.jpg"); background-size: 100% 100%;}
93.76% {background: url("f.jpg"); background-size: 100% 100%;}
to { background: url("f.jpg"); background-size: 100% 100%;}
}

@-moz-keyframes hexad{
from { background: url("0.jpg"); background-size: 100% 100%;}
6.25% { background: url("0.jpg"); background-size: 100% 100%;}
6.26% {background: url("1.jpg"); background-size: 100% 100%;}
12.5% {background: url("1.jpg"); background-size: 100% 100%;}
12.6% {background: url("2.jpg"); background-size: 100% 100%;}
18.75% {background: url("2.jpg"); background-size: 100% 100%;}
18.76% {background: url("3.jpg"); background-size: 100% 100%;}
25% {background: url("3.jpg"); background-size: 100% 100%;}
25.1% {background: url("4.jpg"); background-size: 100% 100%;}
31.25% {background: url("4.jpg"); background-size: 100% 100%;}
31.26% {background: url("5.jpg"); background-size: 100% 100%;}
37.5% {background: url("5.jpg"); background-size: 100% 100%;}
37.51% {background: url("6.jpg"); background-size: 100% 100%;}
43.75% {background: url("6.jpg"); background-size: 100% 100%;}
43.76% {background: url("7.jpg"); background-size: 100% 100%;}
50% {background: url("7.jpg"); background-size: 100% 100%;}
50.1% {background: url("8.jpg"); background-size: 100% 100%;}
56.25% {background: url("8.jpg"); background-size: 100% 100%;}
56.26% {background: url("9.jpg"); background-size: 100% 100%;}
62.5% {background: url("9.jpg"); background-size: 100% 100%;}
62.51% {background: url("a.jpg"); background-size: 100% 100%;}
68.75% {background: url("a.jpg"); background-size: 100% 100%;}
68.76% {background: url("b.jpg"); background-size: 100% 100%;}
75% {background: url("b.jpg"); background-size: 100% 100%;}
75.1% {background: url("c.jpg"); background-size: 100% 100%;}
81.25% {background: url("c.jpg"); background-size: 100% 100%;}
81.26% {background: url("d.jpg"); background-size: 100% 100%;}
87.5% {background: url("d.jpg"); background-size: 100% 100%;}
87.6% {background: url("e.jpg"); background-size: 100% 100%;}
93.75% {background: url("e.jpg"); background-size: 100% 100%;}
93.76% {background: url("f.jpg"); background-size: 100% 100%;}
to { background: url("f.jpg"); background-size: 100% 100%;}
}

Si vous savez quel est mon erreur merci de me répondre ^^.

4 réponses

  1.  animostab
    Salut
    @keyframes ne peux pas switcher des images de background, donc la ton code est "futuriste" (peux être un jour ce sera possible mais pour l'heure: non.)

    ce que tu peux faire c'est mettre toutes les images en une seule (les unes à la suite des autres) et animer comme un sprite.

    sinon tu devras faire un diaporama genre jquery

    autre chose ne mets pas de double quotes dans le parenthèse url
    ex url(image1.jpg);

    Un petit merci vaut mieux qu'une grande ignorance !
    Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
    1. Utilisateur anonyme
      Salut, essaye de changer tes background par background-image

      bonne soirée
      1. animostab
        @lobotoFix
        @keyframes ne peux pas changer une image de background en une autre
      2. Utilisateur anonyme
        ok...désolé :)
    2. stev
      La réinstallation de firefox ne change rien, j'ai plusieurs animations sur mon site et seuls les animations qui modifie le background ne marche pas sur firefox... C'est vraiment bizarre ..

      Discussions similaires

      Idées animations centre d'appel
      goliath09

      8 réponses
      J'ai le message "coudn't load XPCOM."
      Rock62

      7 réponses