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. 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 ..
    0
    1. Utilisateur anonyme
      Salut, essaye de changer tes background par background-image

      bonne soirée
      0
      1. animostab
        @lobotoFix
        @keyframes ne peux pas changer une image de background en une autre
        0
      2. Utilisateur anonyme
        ok...désolé :)
        0
    2. 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.
      0
      1. monday1999
        Bonjour, réinstallez Firefox et verifiez vos Plugin
        -1
        1. monday1999
          Re-téléchargez le en cliquant sur "Firefox"
          0

      Discussions similaires

      Idées animations centre d'appel
      goliath09

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

      7 réponses