Hintergrundbilder animieren: Browserübergreifende Kompatibilität
Bei Webanimationen ist es üblich, das Hintergrundbild während Übergängen oder Keyframes zu ändern. Benutzer haben jedoch berichtet, dass Hintergrundbildanimationen in Firefox oder Internet Explorer nicht funktionieren.
Warum Firefox und Internet Explorer keine Hintergrundbildanimationen anzeigen können
Gemäß den CSS-Standards gilt „Hintergrundbild“ nicht als animierbare Eigenschaft. Firefox und Internet Explorer halten sich an diese Spezifikation, was zu fehlenden Animationen führt.
Verhalten von Chrome
Trotz der Spezifikation zeigt Chrome die Hintergrundbildanimationen an. Dies liegt an der Interpretation von Chrome, dass das Hintergrundbild implizit animierbar ist (innerhalb der Deckkraft und Position).
Seltsame Handhabung von Übergängen durch Firefox
Firefox verhält sich zwischen Übergängen und Animationen inkonsistent . Während beim Übergang das Hintergrundbild angezeigt wird, wird die Animation vollständig übersprungen.
Lösung: Alternative Eigenschaften verwenden
Um die browserübergreifende Kompatibilität sicherzustellen, vermeiden Sie die Verwendung von Hintergrund- Bild innerhalb von Keyframes. Verwenden Sie stattdessen „Hintergrundposition“ oder „Opazität“, wie im folgenden Zitat vorgeschlagen:
„Um Farbverläufe zu animieren, müssen sie vom gleichen Typ sein.“
Codeausschnitt:
Im bereitgestellten Codeausschnitt zeigt das erste Div einen Hintergrundbildübergang (funktioniert in allen Browsern), während das zweite Div versucht, das Hintergrundbild zu animieren (funktioniert nicht in Firefox oder Internet Explorer).
Das obige ist der detaillierte Inhalt vonWarum animieren Firefox und Internet Explorer keine Hintergrundbilder?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
