So lösen Sie das Problem, dass die Animation in CSS hängen bleibt

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.

Das sind großartige Neuigkeiten für Browser! Der Browser muss die Bitmap

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

der Inhalt des Elements

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.

2. Aber in manchen Fällen müssen wir keine 3D-Transformationseffekte auf Elemente anwenden, was sollen wir also tun? Zu diesem Zeitpunkt können wir einen kleinen Trick verwenden, um den Browser zu „betrügen“ und die Hardwarebeschleunigung zu aktivieren.

.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!