Warum kann ich Hintergrundbilder in Firefox und Internet Explorer nicht animieren?

Hintergrundbild in Keyframes: Unwirksam in Firefox und Internet Explorer

Das Problem betrifft, wie berichtet, das Fehlen einer Hintergrundbildanimation in Firefox und Internet Explorer. Diese Inkonsistenz ergibt sich aus der Tatsache, dass „background-image“ gemäß CSS-Spezifikationen keine animierbare Eigenschaft ist. Dennoch gehen verschiedene Browser unterschiedlich mit dieser Diskrepanz um.

Chrome (Webkit) zeigt das Hintergrundbild während der Animation an, während Firefox und IE dies nicht tun. Eine Quelle bei oli.jp erklärt, dass diese Inkonsistenz möglicherweise auf die mangelnde breite Unterstützung für das Überblenden von Bildern in CSS zurückzuführen ist. In der Zwischenzeit können Bild-Sprites, Hintergrundposition oder Deckkraft verwendet werden, um diesen Effekt zu simulieren.

Paradoxerweise unterscheidet sich das Verhalten von Firefox zwischen Übergängen und Animationen mit Hintergrundbildern. Während das zweite Bild bei Übergängen sofort angezeigt wird (wie man sieht, wenn man mit der Maus über das erste Div im Codeausschnitt fährt), gelingt dies bei Animationen nicht (wie man sieht, wenn man mit der Maus über das zweite Div fährt).

Fazit: ist es ratsam, kein Hintergrundbild innerhalb von Keyframes festzulegen. Entscheiden Sie sich stattdessen für die Hintergrundposition oder die Deckkraft, wie von oli.jp vorgeschlagen.

Das obige ist der detaillierte Inhalt vonWarum kann ich Hintergrundbilder in Firefox und Internet Explorer nicht animieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!