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? erfahren Sie mehr über die Theorie hinter diesen Empfehlungen.

Browserkompatibilität

Alle in diesem Leitfaden empfohlenen CSS-Properties werden von den meisten Browsern unterstützt.

transform

opacity

will-change

Element verschieben

Verwenden Sie zum Verschieben eines Elements die Schlüsselwortwerte translate oder rotation des Attributs transform.

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 um 360 Grad gedreht.

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Größe eines Elements anpassen

Verwenden Sie den Schlüsselwortwert scale der Property transform, um die Größe eines Elements anzupassen.

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

Sichtbarkeit eines Elements ändern

Verwenden Sie opacity, um ein Element ein- oder auszublenden.

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Eigenschaften vermeiden, die das Layout oder das Malen auslösen

Bevor Sie eine CSS-Eigenschaft für Animationen verwenden (außer transform und opacity), sollten Sie die Auswirkungen der Property auf die Rendering-Pipeline ermitteln. Verwenden Sie keine Properties, die das Layout oder die Darstellung auslösen, es sei denn, dies ist unbedingt erforderlich.

Ebenenerstellung erzwingen

Wie im Artikel Warum sind manche Animationen langsam? erläutert, können Elemente in einer neuen Ebene im Browser neu gerendert werden, ohne dass das gesamte Layout neu gerendert werden muss.

Browser können in der Regel gut entscheiden, welche Elemente auf einer neuen Ebene platziert werden sollten. Sie können die Ebenenerstellung jedoch mit der Eigenschaft will-change manuell erzwingen. Wie der Name schon sagt, teilt diese Eigenschaft dem Browser mit, dass dieses Element auf irgendeine Weise geändert wird.

In CSS können Sie will-change auf jeden Selektor anwenden:

body > .sidebar {
  will-change: transform;
}

Die Spezifikation empfiehlt jedoch, dies nur für Elemente zu tun, die sich ständig ändern. Das kann beispielsweise für eine Seitenleiste gelten, die der Nutzer ein- und ausblenden kann. Bei Elementen, die sich nicht häufig ändern, empfehlen wir, will-change mit JavaScript anzuwenden, wenn eine Änderung wahrscheinlich ist. Geben Sie dem Browser genügend Zeit, die erforderlichen Optimierungen vorzunehmen, und entfernen Sie die Property, sobald die Änderung abgeschlossen ist.

Wenn Sie die Ebenenerstellung in einem Browser erzwingen möchten, der will-change nicht unterstützt (höchstwahrscheinlich Internet Explorer), können Sie transform: translateZ(0) festlegen.

Fehlerbehebung bei langsamen oder fehlerhaften Animationen

Die Chrome-Entwicklertools und die Firefox-Entwicklertools bieten viele Tools, mit denen Sie herausfinden können, warum Ihre Animationen langsam oder fehlerhaft sind.

Prüfen, ob eine Animation das Layout auslöst

Eine Animation, bei der ein Element mit etwas anderem als transform verschoben wird, ist wahrscheinlich langsam. Im folgenden Beispiel wird eine Animation mit transform mit einer Animation mit top und left verglichen.

.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 beiden Glitch-Beispielen testen und die Leistung mit den Entwicklertools analysieren.

• Vorher
• Nachher

Chrome-Entwicklertools

1. Öffnen Sie den Bereich Leistung.
2. Erfassen Sie die Laufzeitleistung, während die Animation läuft.
3. Sehen Sie sich den Tab Zusammenfassung an.

Wenn auf dem Tab Zusammenfassung ein Wert ungleich 0 für Rendering angezeigt wird, bedeutet das möglicherweise, dass der Browser aufgrund Ihrer Animation Layoutarbeit leisten muss.

Firefox-Entwicklertools

In den Firefox-Entwicklertools können Sie mit dem Tool Wasserfall nachvollziehen, wo sich der Browser befindet.

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 Einträge für Stil neu berechnen angezeigt werden, muss der Browser zum Anfang der Rendering-Abfolge zurückkehren, um die Animation zu rendern.

Auf verlorene Frames prüfen

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 die Animation läuft.

Beachten Sie das Label Frames oben auf der Benutzeroberfläche des FPS-Messgeräts. Dies führt zu Werten wie 50% 1 (938 m) dropped of 1878. Eine leistungsstarke Animation hat einen hohen Prozentsatz, z. B. 99%. Das bedeutet, dass nur wenige Frames ausgelassen werden und die Animation flüssig aussieht.

Prüfen, ob eine Animation das Malen auslöst

Das Rendern einiger Properties ist für den Browser aufwendiger als das anderer. Beispielsweise dauert es länger, etwas zu malen, das unscharf ist (z. B. einen Schatten), als einen roten Rahmen zu zeichnen. Diese Unterschiede sind im CSS nicht immer offensichtlich. Mit den Browser-Entwicklertools können Sie jedoch ermitteln, welche Bereiche neu gerendert werden müssen, und andere mit dem Rendering zusammenhängende Leistungsprobleme erkennen.

Chrome-Entwicklertools

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

Wenn der gesamte Bildschirm blinkt oder Bereiche hervorgehoben werden, die sich Ihrer Meinung nach nicht ändern sollten, sollten Sie weitere Untersuchungen durchführen.

Wenn Sie ermitteln möchten, ob eine bestimmte Eigenschaft Probleme mit der Grafikqualität verursacht, können Sie den Paint-Profiler in den Chrome-Entwicklertools verwenden.

Firefox-Entwicklertools

1. Öffnen Sie die Einstellungen und fügen Sie eine Toolbox-Schaltfläche zum Blinken der Farbe ein-/ausschalten hinzu.
2. Aktivieren Sie die Schaltfläche auf der zu prüfenden Seite und bewegen Sie die Maus oder scrollen Sie, um die markierten Bereiche zu sehen.

Fazit

Beschränken Sie Animationen nach Möglichkeit auf opacity und transform, damit sie sich in der Compositing-Phase des Rendering-Pfads befinden. Prüfen Sie mit den Entwicklertools, welche Phase des Pfades von Ihren Animationen betroffen ist.

Mit dem Paint Profiler können Sie feststellen, ob bestimmte Paint-Vorgänge besonders aufwendig sind. Wenn Sie etwas finden, prüfen Sie, ob eine andere CSS-Eigenschaft das gleiche Erscheinungsbild mit besserer Leistung bietet.

Verwenden Sie die Property will-change sparsam und nur, wenn ein Leistungsproblem auftritt.