CSS3 transition de l'image de fond d'écran de Firefox ne fonctionne pas

Mon image de fond d'écran de transition fonctionne très bien dans Chrome, mais ne fait rien dans Firefox. Je suis nouvelle dans les transitions CSS3. Fait des recherches et ma syntaxe semble être correct. De ce que j'ai lu FF devrait soutenir cette. Je suis sur FF 12.0. Comment se fait cette CSS3 transition ne fonctionne pas dans Firefox.

Pas de javascript. Aucune solution de rechange. Juste une explication de pourquoi c'est un échec serait merveilleux.

http://jsfiddle.net/VCdGt/3/

a.call_to_action
{
    text-decoration: none;
    display: block;
    color: #232744;
    font-size: 20px;
    font-weight: bold;
    height: 47px;
    width: 185px;
    overflow: hidden;
    margin: 10px auto 15px auto;
    text-align: center;
    border: none;
    background: yellow;
    background-image: url(http://www.pslover.com/images/thumb/2751.jpg);
    -webkit-transition: background-image .5s linear;
    -moz-transition: background-image .5s linear;
}

a.call_to_action:hover {
    background: orange;
    background-image: url(http://www.tutorialdash.com/avatars/3b1f70c20325d8676ce1f56cb9b43f17.gif);
    color: #4F4246;
}
Je pense que pour une raison quelconque IE9 & FF ne supporte pas les fichiers gif. peut-être que je pense que vous devriez essayer de créer des sprites et de mettre js SetInterval & continuer à changer les images, mais son méchant sur le montant de sprites que vous devez mettre pour une transition en douceur.
merci pour la suggestion. Je suis en fait à l'aide de la png en local donc je ne pense pas que c'est elle. J'ai juste attrapé ces images sur le web à des fins de démonstration. Je ne veux pas utiliser js pour cette. Je préfère l'ignorer complètement que d'utiliser js.
Dans le cas de la png, avez-vous essayé de regarder les Sprites CSS?
ouais je viens de vérifier et le format de fichier n'a pas d'importance. Je suis au courant de beaucoup de façons de le faire. Je ne suis pas à la recherche de solutions de contournement. Je suis à la recherche d'pourquoi cela ne fonctionne pas.

OriginalL'auteur mrtsherman | 2012-04-27

  1. 10

    Trouvé la réponse dans le MDN docs.

    http://oli.jp/2010/css-animatable-properties/#background-image

    background-image

    C'est encore un peu en l'air, avec “seulement dégradés” dans le
    actuel Projet de Travail, pas de background-image dans le courant
    L'éditeur de Projet, et les “Animables: pas de” pour le background-image dans le CSS
    Origines et des Frontières au Niveau du Module 3 de l'Éditeur de Projet. Cependant,
    le soutien est apparu en Chrome 19 Canaries, et c'est quelque chose que
    les concepteurs veulent. Jusqu'à ce qu'un large soutien arrive ce peut être falsifiée par
    sprites d'image et background-position ou d'opacité.'

    En ce moment j'ai constaté que personne ne prend en charge les gradients (Chrome 17, FF 12, IE9). Seulement google Chrome est compatible avec background-image (c'est pourquoi il ne fonctionne pas dans FF pour moi).

    OriginalL'auteur mrtsherman

  2. 0

    C'est 2014 et de la propriété background-image n'est toujours pas animables:
    http://dev.w3.org/csswg/css-backgrounds/#background-image

    Fonctionne très bien dans webkit, mais pas dans Firefox. Il semble que la seule façon de faire de l'animation est d'utiliser jQuery de secours pour Firefox.

    OriginalL'auteur Yura Loginov