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? finden Sie die Theorie hinter diesen Empfehlungen.

Browserkompatibilität

Alle in diesem Leitfaden empfohlenen CSS-Properties werden von allen Browsern gut unterstützt.

transform

Browser Support

• 36
• 12
• 16
• 9

Source

opacity

Browser Support

• 1
• 12
• 1
• 2

Source

will-change

Browser Support

• 36
• 79
• 36
• 9.1

Source

Element verschieben

Verwenden Sie die translate oder rotation Schlüsselwortwerte der transform Property, um ein Element zu verschieben.

Verwenden Sie beispielsweise translate, um ein Element in die Ansicht zu schieben.

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

Mit rotate können Sie Elemente 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 ändern

Verwenden Sie den scale Schlüsselwortwert der transform Property, 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;
  }
}

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

Properties vermeiden, die Layout oder Paint auslösen

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

Warnung: Wenn Sie eine Property verwenden müssen, die Layout oder Paint auslöst, können Sie die Animation wahrscheinlich nicht reibungslos oder leistungsstark gestalten.

Erzwingen der Layererstellung

Wie unter Warum sind einige Animationen langsam? erläutert, können Browser Elemente neu zeichnen, ohne das restliche Layout neu zeichnen zu müssen, wenn Sie Elemente auf einer neuen Ebene platzieren.

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

**Achtung** :Da die Layererstellung andere Leistungsprobleme verursachen kann, empfehlen wir, sie nicht früh im Optimierungsprozess zu verwenden. Verwenden Sie sie stattdessen nur, wenn Sie Grafikprobleme feststellen und der Meinung sind, dass das Heraufstufen eines Elements auf eine neue Ebene helfen könnte.

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

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

Die Spezifikation empfiehlt jedoch, diese Property nur Elementen hinzuzufügen, die sich immer ändern. Dies könnte beispielsweise für eine Seitenleiste verwendet werden, die der Nutzer ein- und ausblenden kann. Wenn sich das Element nicht häufig ändert, wenden Sie will-change mit JavaScript an, wenn eine Änderung wahrscheinlich ist. Geben Sie dem Browser genügend Zeit, um die erforderlichen Optimierungen vorzunehmen, und entfernen Sie die Property, wenn die Änderung abgeschlossen ist.

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

Langsame oder fehlerhafte Animationen debuggen

Chrome-Entwicklertools und Firefox-Entwicklertools können Ihnen helfen, herauszufinden, warum Ihre Animationen langsam sind oder fehlerhaft sind.

Prüfen, ob eine Animation Layout auslöst

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

Was Sie nicht tun sollten

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

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

Das sollten Sie tun:

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

• Vorher, mit top und left Animation.
• Nachher, mit transform.

Chrome-Entwicklertools

1. Öffnen Sie den Bereich Leistung.
2. Erfassen Sie die Laufzeitleistung während die Animation ausgeführt wird.
3. Prüfen Sie den Tab Zusammenfassung.

Wenn auf dem Tab Zusammenfassung ein Wert ungleich null für Rendering angezeigt wird, bedeutet das möglicherweise, dass Ihre Animation den Browser dazu zwingt, Layoutarbeit zu leisten.

Das Beispiel für die animation-with-top-left verursacht Rendering-Arbeit.

Das Beispiel für die Animation mit „transform“ verursacht keine Rendering-Arbeit.

Firefox-Entwicklertools

In den Firefox-Entwicklertools können Sie mit dem Wasserfalldiagramm nachvollziehen, wo der Browser Zeit verbringt.

1. Öffnen Sie den Bereich Leistung.
2. Starten Sie die Leistungserfassung, während die Animation ausgeführt wird.
3. Beenden Sie die Aufzeichnung und prüfen Sie den Tab Wasserfall.

Wenn Einträge für Stil neu berechnen angezeigt werden, bedeutet dies, dass der Browser zum Anfang des Rendering-Wasserfalls zurückkehren muss, um die Animation zu rendern.

Auf verworfene Frames prüfen

1. Öffnen Sie in den Chrome-Entwicklertools den Tab Rendering.
2. Aktivieren Sie das Kästchen FPS-Zähler.
3. Beobachten Sie die Werte, während die Animation ausgeführt wird.

Achten Sie auf die Beschriftung Frames oben in der UI des FPS-Zählers. Dort werden Werte wie 50% 1 (938 m) dropped of 1878 angezeigt. Eine leistungsstarke Animation hat einen hohen Prozentsatz, z. B. 99%. Das bedeutet, dass nur wenige Frames verworfen werden und die Animation reibungslos aussieht.

Das Beispiel für die animation-with-top-left führt dazu, dass 50% der Frames verworfen werden.

Das Beispiel für die Animation mit „transform“ führt dazu, dass nur 1% der Frames verworfen werden.

Prüfen, ob eine Animation Paint auslöst

Einige Properties sind für den Browser teurer zu zeichnen als andere. Alles, was eine Unschärfe beinhaltet (z. B. ein Schatten), dauert länger zu zeichnen als eine rote Box. Diese Unterschiede sind im CSS nicht immer offensichtlich, aber mit den Entwicklertools des Browsers können Sie ermitteln, welche Bereiche neu gezeichnet werden müssen, und andere leistungstechnische Probleme im Zusammenhang mit dem Zeichnen 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 auf dem Bildschirm.

In diesem Beispiel aus Google Maps sehen Sie, wie die Elemente neu gezeichnet werden.

Wenn der gesamte Bildschirm blinkt oder Bereiche hervorgehoben werden, die sich Ihrer Meinung nach nicht ändern sollten, untersuchen Sie das Problem weiter.

Wenn Sie feststellen möchten, ob eine bestimmte Property leistungstechnische Probleme im Zusammenhang mit dem Zeichnen verursacht, kann Ihnen der Paint-Profiler in den Chrome-Entwicklertools helfen.

Firefox-Entwicklertools

1. Öffnen Sie die Einstellungen und fügen Sie eine Schaltfläche für „Paint-Flashing umschalten“ zur Toolbox hinzu.
2. Aktivieren Sie auf der Seite, die Sie untersuchen möchten, die Schaltfläche und bewegen Sie die Maus oder scrollen Sie, um hervorgehobene Bereiche zu sehen.

Animationen in der Composite-Phase

Beschränken Sie Animationen nach Möglichkeit auf opacity und transform, damit sie in der Composite-Phase des Rendering-Pfads bleiben. Mit den Entwicklertools können Sie prüfen, welche Phase des Pfads von Ihren Animationen betroffen ist.

Mit dem Paint-Profiler können Sie sehen, ob bestimmte Paint-Vorgänge besonders teuer sind. Wenn Sie etwas finden, prüfen Sie, ob eine andere CSS-Property dasselbe Erscheinungsbild mit besserer Leistung bietet.

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