In diesem Leitfaden erfahren Sie, wie Sie leistungsstarke CSS-Animationen erstellen.
Unter Warum sind einige Animationen langsam? die Theorie hinter diesen Empfehlungen.
Browserkompatibilität
Alle in diesem Leitfaden empfohlenen CSS-Eigenschaften haben gute browserübergreifende Support.
transform
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
opacity
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
will-change
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Elemente verschieben
Um ein Element zu verschieben, verwenden Sie die Schlüsselwortwerte translate
oder rotation
der
transform
-Property.
Um beispielsweise ein Element in den sichtbaren Bereich zu ziehen, verwenden Sie translate
.
.animate {
animation: slide-in 0.7s both;
}
@keyframes slide-in {
0% {
transform: translateY(-1000px);
}
100% {
transform: translateY(0);
}
}
Verwenden Sie rotate
, um Elemente zu drehen. Im folgenden Beispiel wird ein Element gedreht
360 Grad.
.animate {
animation: rotate 0.7s ease-in-out both;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Größe eines Elements ändern
Wenn Sie die Größe eines Elements ändern möchten, verwenden Sie den Schlüsselwortwert scale
des
transform
-Property.
.animate {
animation: scale 1.5s both;
}
@keyframes scale {
50% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
Sichtbarkeit eines Elements ändern
Wenn Sie ein Element ein- oder ausblenden möchten, verwenden Sie opacity
.
.animate {
animation: opacity 2.5s both;
}
@keyframes opacity {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Eigenschaften vermeiden, die Layout oder Darstellung auslösen
Bevor Sie CSS-Eigenschaften für Animationen verwenden (außer transform
und opacity
),
Wie sich das Attribut auf die Rendering-Pipeline auswirkt
Vermeiden Sie Eigenschaften, die Layout oder Darstellung auslösen, sofern dies nicht unbedingt erforderlich ist.
Ebenenerstellung erzwingen
Wie unter Warum sind einige Animationen langsam? erläutert, Wenn Sie Elemente in einer neuen Ebene platzieren, kann der Browser diese aktualisieren, ohne den Rest des Layouts.
Browser können in der Regel entscheiden, welche Elemente auf einem
neue Ebene erstellt, aber Sie können die Ebenenerstellung manuell mit der
will-change
-Property.
Wie der Name schon sagt, teilt diese Eigenschaft dem Browser mit, dass dieses Element
irgendwie geändert werden.
In CSS kann will-change
auf jeden Selektor angewendet werden:
body > .sidebar {
will-change: transform;
}
Die Spezifikation
schlägt vor, dass Sie dies nur bei Elementen tun sollten,
ändern können. Dies kann z. B. bei einer Seitenleiste der Fall sein,
aus. Für Elemente, die sich nicht häufig ändern, empfehlen wir,
will-change
mithilfe von JavaScript, wenn eine Änderung wahrscheinlich ist. Achten Sie darauf,
dem Browser genügend Zeit geben, die notwendigen Optimierungen vorzunehmen, und
wenn die Änderung gestoppt wurde.
Wenn Sie das Erstellen von Ebenen in einem Browser erzwingen, der will-change
nicht unterstützt
(höchstwahrscheinlich Internet Explorer) verwenden, können Sie transform: translateZ(0)
festlegen.
Fehlerbehebung bei langsamen oder fehlerhaften Animationen
In den Chrome-Entwicklertools und in Firefox warum Ihre Animationen langsam oder störungsfrei sind.
Prüfen, ob eine Animation das Layout auslöst
Eine Animation, bei der ein Element mit etwas anderem als transform
verschoben wird, ist
langsam sein. Im folgenden Beispiel wird eine Animation mit transform
verglichen
mit top
und left
in eine Animation umwandeln.
.box { position: absolute; top: 10px; left: 10px; animation: move 3s ease infinite; } @keyframes move { 50% { top: calc(90vh - 160px); left: calc(90vw - 200px); } }
.box { position: absolute; top: 10px; left: 10px; animation: move 3s ease infinite; } @keyframes move { 50% { transform: translate(calc(90vw - 200px), calc(90vh - 160px)); } }
Sie können dies in den folgenden zwei Glitch-Beispielen testen: und die Leistung mit den Entwicklertools analysieren.
Chrome-Entwicklertools
- Öffnen Sie den Bereich Leistung.
- Laufzeitleistung aufzeichnen während die Animation läuft.
- Sehen Sie sich den Tab Zusammenfassung an.
Wenn auf dem Tab Zusammenfassung für Rendering ein Wert ungleich null angezeigt wird, bedeutet, dass der Browser durch die Animation auf das Layout reagiert.
<ph type="x-smartling-placeholder">![Im Bereich „Summary“ (Zusammenfassung) werden 37 ms für das Rendering und 79 ms für das Painting angezeigt.](https://web.developers.google.cn/static/articles/animations-guide/image/the-summary-panel-shows-3-d8a0efc73229b.jpg?authuser=8&hl=de)
![Im Bereich „Summary“ (Zusammenfassung) werden Nullwerte für das Rendern und Painting angezeigt.](https://web.developers.google.cn/static/articles/animations-guide/image/the-summary-panel-show-ze-6036893c491f8.jpg?authuser=8&hl=de)
Firefox-Entwicklertools
In den Firefox-Entwicklertools ist Wasserfall können Sie besser nachvollziehen, wo der Browser die meiste Zeit verbringt.
- Öffnen Sie den Bereich Leistung.
- Starten Sie die Aufnahme, während die Animation läuft.
- Beenden Sie die Aufzeichnung und sehen Sie sich den Tab Wasserfall an.
Wenn Sie Stil neu berechnen sehen, muss der Browser also wieder zum Anfang Rendering-Wasserfall um die Animation zu rendern.
Nach verworfenen Frames suchen
- Öffnen Sie in den Chrome-Entwicklertools den Tab Rendering.
- Klicken Sie das Kästchen FPS-Messtool an.
- Beobachten Sie die Werte während der Animation.
Achten Sie auf das Label Frames oben auf der Benutzeroberfläche des FPS-Messtools.
Hier werden Werte wie 50% 1 (938 m) dropped of 1878
angezeigt. Ein leistungsstarkes
Animation hat einen hohen Prozentsatz wie 99%
. Das bedeutet, dass nur wenige Frames
und die Animation sieht flüssig aus.
![Laut fps-Messtool wurden 50% der Frames verworfen.](https://web.developers.google.cn/static/articles/animations-guide/image/the-fps-meter-shows-50-e279493d08c47.jpg?authuser=8&hl=de)
![Die Framerate zeigt, dass nur 1% der Frames verloren gingen.](https://web.developers.google.cn/static/articles/animations-guide/image/the-fps-meter-shows-1-97f98fe03092a.jpg?authuser=8&hl=de)
Prüfen, ob eine Animation eine Farbe auslöst
Einige Eigenschaften sind für den Browser teurer als andere. Für Beispielsweise dauert alles, was mit einem Weichzeichnereffekt (wie z. B. Schatten) versehen ist, länger. anstatt einen roten Kasten zu zeichnen. Diese Unterschiede sind in der Mit den Browser-Entwicklertools können Sie jedoch ermitteln, und anderen Leistungsproblemen im Zusammenhang mit der Farbgestaltung.
Chrome-Entwicklertools
- Öffnen Sie in den Chrome-Entwicklertools den Tab Rendering.
- Wählen Sie Blinken zeichnen aus.
- Bewegen Sie den Mauszeiger über den Bildschirm.
![Ein grün hervorgehobenes UI-Element, das zeigt, dass es neu gezeichnet wird](https://web.developers.google.cn/static/articles/animations-guide/image/a-ui-element-highlighted-43b56111254fb.jpg?authuser=8&hl=de)
Wenn der gesamte Bildschirm blinkt oder Bereiche hervorgehoben sind, die Ihrer Meinung nach nicht sollten Sie das Problem genauer untersuchen.
Wenn Sie herausfinden möchten, ob eine bestimmte Eigenschaft Painting-Leistungsprobleme hat den Paint-Profiler in den Chrome-Entwicklertools.
Firefox-Entwicklertools
- Öffnen Sie die Einstellungen und fügen Sie eine Toolbox-Schaltfläche für Blinken der Farbe ein-/ausschalten.
- Schalten Sie die Schaltfläche auf der zu überprüfenden Seite ein und bewegen Sie die Maus oder scrollen, um markierte Bereiche zu sehen.
Fazit
Wenn möglich, solltest du Animationen auf opacity
und transform
beschränken, damit sie nicht verloren gehen.
Animationen im zusammengesetzten Anzeigebereich des Renderingpfads zu erstellen. Mit den Entwicklertools prüfen
welche Phase des Pfads von den Animationen beeinflusst wird.
Verwenden Sie den Paint-Profiler, um festzustellen, ob bestimmte Paint-Vorgänge besonders relevant sind. teuer sein. Wenn Sie etwas finden, prüfen Sie, ob eine andere CSS-Property das gleiche Design und bessere Leistung erzielen.
Verwenden Sie die Eigenschaft will-change
nur in Ausnahmefällen und nur dann, wenn ein Leistungsproblem auftritt.