Leistungsstarke CSS-Animationen erstellen

Kayce Basques

Rachel Andrew

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> 36
• <ph type="x-smartling-placeholder"></ph> 12
• <ph type="x-smartling-placeholder"></ph> 16
• <ph type="x-smartling-placeholder"></ph> 9

Quelle

opacity

Unterstützte Browser

• <ph type="x-smartling-placeholder"></ph> 1.
• <ph type="x-smartling-placeholder"></ph> 12
• <ph type="x-smartling-placeholder"></ph> 1.
• <ph type="x-smartling-placeholder"></ph> 2.

Quelle

will-change

Unterstützte Browser

• <ph type="x-smartling-placeholder"></ph> 36
• <ph type="x-smartling-placeholder"></ph> 79
• <ph type="x-smartling-placeholder"></ph> 36
• <ph type="x-smartling-placeholder"></ph> 9,1

Quelle

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;
  }
}

Hinweis :Beispiele verschiedener Animationen zum Kopieren und Einfügen finden Sie bei Animista.

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.

Warnung: Wenn Sie eine Eigenschaft verwenden müssen, die Layout oder Darstellung auslöst, wird die Animation nicht flüssig oder leistungsstark gehalten.

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.

Achtung: Da das Erstellen von Ebenen andere Leistungsprobleme verursachen kann, sollten Sie sie frühzeitig im Optimierungsprozess einsetzen. Verwenden Sie sie stattdessen nur, wenn stellst du Grafikprobleme fest und denkst, dass ein Element auf eine neue Ebene hochgestuft wird, kann Ihnen das helfen.

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.

Hinweis :Weitere Informationen und Beispiele zur Verwendung von will-change finden Sie unter Alles, was Sie über die Preisvergleichsportal-will-change-Property wissen müssen

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.

Don'ts

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

Do

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

• Vorher:
• Nachher:

Chrome-Entwicklertools

1. Öffnen Sie den Bereich Leistung.
2. Laufzeitleistung aufzeichnen während die Animation läuft.
3. 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">

</ph> <ph type="x-smartling-placeholder">

</ph> Die Methode animation-with-top-left führt zu Rendering-Arbeiten.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Die Funktion animation-with-transform keine Rendering-Funktion verursacht.

Firefox-Entwicklertools

In den Firefox-Entwicklertools ist Wasserfall können Sie besser nachvollziehen, wo der Browser die meiste Zeit verbringt.

1. Öffnen Sie den Bereich Leistung.
2. Starten Sie die Aufnahme, während die Animation läuft.
3. 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

1. Öffnen Sie in den Chrome-Entwicklertools den Tab Rendering.
2. Klicken Sie das Kästchen FPS-Messtool an.
3. 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.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Die Methode animation-with-top-left werden bei einem Beispiel 50% der Frames verworfen.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Die Funktion animation-with-transform werden nur 1% der Frames verworfen.

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

1. Öffnen Sie in den Chrome-Entwicklertools den Tab Rendering.
2. Wählen Sie Blinken zeichnen aus.
3. Bewegen Sie den Mauszeiger über den Bildschirm.

<ph type="x-smartling-placeholder">

</ph>

In diesem Beispiel aus Google Maps siehst du die Elemente, die neu gezeichnet werden.

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

1. Öffnen Sie die Einstellungen und fügen Sie eine Toolbox-Schaltfläche für Blinken der Farbe ein-/ausschalten.
2. 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.