Ich erstelle eine CSS-Keyframe-Animation, um ein Element so aussehen zu lassen, als ob es zufällig / langsam um ein Bit schwebt. Es ist in Eltern verschachtelt, eines, das translateX () verwendet, um es langsam nach links und rechts zu bewegen, und eines, das translateY () verwendet, um es langsam und unabhängig nach oben und unten zu bewegen.
Chrome und Safari rendern das perfekt und geben ihm eine allmähliche schwingende Bewegung. Es glättet die Animation (vielleicht mit Sub-Pixel-Glättung?), So dass alles sehr glatt aussieht. Firefox animiert es jedoch Pixel für Pixel, also kann man es, statt sanft zu schwanken, bei jedem Pixel springen sehen.
Zeigen Sie das JSFiddle in Chrome und FireFox an, um den Unterschied zu sehen: Ссылка
Gibt es eine Möglichkeit, FireFox so zu rendern, dass es nicht Pixel für Pixel springt? Es ist extrem bemerkbar in der tatsächlichen Anwendung dafür.
Das Markup:
%Vor%Das CSS:
%Vor%Die Rendering-Engines für jeden Browser sind offensichtlich anders. Firefox implementiert keinen Anti-Aliasing-Effekt für CSS-Animationen. Dies macht es nicht von Natur aus besser oder schlechter, es hängt nur davon ab, was Sie animieren. Lineare Übergänge können in Chrome beispielsweise unerwünscht unscharf erscheinen.
Das heißt, es scheint, was Sie erreichen möchten, ist eine Anti-Aliasing / Sub-Pixel geglättete Übergänge. Wir können die Art, wie die Engine rendert, nicht ändern, aber wir können die Animation so manipulieren, dass sie für den Endbenutzer weicher erscheint.
ALLES IST NICHT VERLOREN
Ich habe Ihre Antwort geändert und eine flüssigere Version neben Ihrem Original erstellt. Dies sollte weicher erscheinen, wenn Sie in Firefox angezeigt werden.
Für diesen Effekt verwendete Techniken:
CSS
%Vor%ENDLICHES WORT
Sie können die Effekte noch ein wenig nach Ihren Wünschen anpassen. Es ist nicht perfekt, aber ich hoffe, es hilft, den End-Effekt für Ihre tatsächliche Animation abzuschwächen.
†: Eine Beschreibung dieser Technik finden Sie hier .
Tags und Links css animation firefox css-animations