Hintergrundbild in Keyframe wird nicht in Firefox oder Internet Explorer angezeigt

Ich habe mehrere Animationen auf meiner Website, die ich gerade erst in Firefox oder Internet Explorer gesehen habe. Ich habe das background-image innerhalb der Keyframes. Ich mache das, weil ich unterschiedliche Bilder in verschiedenen Prozentsätzen mit der Animation habe.

Warum wird das background-image nicht in den Keyframes in Firefox und Internet Explorer angezeigt und gibt es eine Möglichkeit, dies zu erreichen?

Gemäß den Spezifikationen ist background-image keine animierbare oder überführbare Eigenschaft. Aber es scheint nichts darüber zu sagen, wie oder wie die Handhabung sein sollte, wenn es als Teil eines Übergangs oder einer Animation verwendet wird. Aus diesem Grund scheint jeder Browser anders damit umzugehen. Während Chrome (Webkit) das Hintergrundbild anzeigt, scheinen Firefox und IE nichts zu tun.

Das folgende Zitat in einem Artikel auf oli.jp enthält einige interessante Informationen:

Während der CSS-Entwurf für Hintergründe und Rahmen des Modul-Level-3-Editors zum Zeitpunkt des Verfassens “Animatable: no” für das Hintergrundbild enthielt, erschien in Chrome 19 Canary Unterstützung für das Überblenden von Bildern in CSS. Bis eine weit verbreitete Unterstützung erreicht wird, kann dies über Bildsprites und Hintergrund-Position oder Opazität gefälscht werden. Um Gradienten animieren zu können, müssen sie vom selben Typ sein.

Auf den ersten Blick sieht es so aus, als würden Firefox und IE es richtig handhaben, Chrome hingegen nicht. Aber es ist nicht so einfach. Firefox scheint sich selbst zu widersprechen, wenn es darum geht, den Übergang von Hintergrundbildern zu Animationen zu bewältigen. Während der Übergang zum background-image wird das zweite Bild sofort angezeigt ( hover das erste div im Snippet), während das zweite Bild während der Animation nicht angezeigt wird (halten Sie das zweite div im Snippet).

Fazit ist, dass es besser ist, background-image nicht innerhalb von Keyframes zu setzen . Stattdessen müssen wir background-position oder opacity wie in @ oli.jp angegeben verwenden.

 div { background-image: url(http://placehold.it/100x100); height: 100px; width: 100px; margin: 10px; border: 1px solid; } div:nth-of-type(1) { transition: background-image 1s ease; } div:nth-of-type(1):hover { background-image: url(http://placehold.it/100/123456/ffffff); } div:nth-of-type(2):hover { animation: show-img 1s ease forwards; } @keyframes show-img { to { background-image: url(http://placehold.it/100/123456/ffffff); } }