Zusammenfassung der Lösungen zur Lösung von CSS3-Animationen
1. Versuchen Sie, die Transformation für Animationen zu verwenden und vermeiden Sie die Verwendung von Höhe, Breite, Rand, Abstand usw.
Der Grund lautet:
Per Definition ändert die CSS-Transformationseigenschaft nicht das Layout des -Elements oder seiner umgebenden Elemente . Das Transformationsattribut wirkt sich auf das gesamte -Element aus. Es skaliert, dreht und verschiebt das gesamte Element.
dieses Elements nur einmal generieren und sie beim Start der Animation zur Verarbeitung an die GPU übermitteln. Anschließend muss der Browser keine Layout-, Zeichen- und Bitmap-Übermittlungsvorgänge ausführen. Dadurch kann der Browser die Möglichkeiten der GPU voll ausnutzen, um Bitmaps schnell an verschiedenen Positionen zu zeichnen, zu drehen oder zu skalieren.
Der Grund, warum es so langsam ist: In jedem Frame der Animation muss der Browser das Layout durchführen, zeichnen und eine neue Bitmap an die
GPU. Wir wissen, dass das Laden einer Bitmap in den Speicher der GPU ein relativ langsamer Vorgang ist. Der Grund, warum der Browser viel Arbeit leisten muss, liegt darin, dass
sich in jedem Frame ständig ändert. Das Ändern der Höhe eines Elements erfordert möglicherweise, dass gleichzeitig die Größe seiner untergeordneten Elemente ändert, sodass der Browser das Layout neu berechnen muss. Nachdem das Layout abgeschlossen ist, muss der Hauptthread die Bitmap des Elements neu generieren. 2. Wenn die Anforderungen hoch sind, können Sie den Browser öffnen und die
GPU-Hardware--Beschleunigung aktivieren. Zum Beispiel:
1. Chrome, Firefox, Safari, IE9+ und die neueste Version von Opera unterstützen jetzt alle Hardwarebeschleunigung, wenn sie erkennen, dass ein bestimmtes DOM-Element auf der Seite angewendet wurde Sicher Die CSS-Regel
wird aktiviert und die wichtigste Funktion ist die 3D-Transformation des Elements.
.cube { -webkit-transform: translate3d(250px,250px,250px) rotate3d(250px,250px,250px,-120deg) scale3d(0.5, 0.5, 0.5);}
Auch wenn wir möglicherweise keine 3D-Transformation auf Elemente anwenden möchten, können wir dennoch die 3D-Engine aktivieren. Beispielsweise können wir transform: TranslateZ(0); verwenden, um die Hardwarebeschleunigung zu aktivieren.
Wenn wir in Chrome und Safari CSS-Transformationen oder Animationen verwenden, kann die Seite flackern. Der folgende Code kann diese Situation beheben:
.cube { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); /* Other transform properties here */}
Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass die Animation in CSS hängen bleibt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!