Beispiele für leistungsstarke CSS-Animationen

Rachel Andrew Technical Writer

Achtung: Eine oder mehrere Demos auf dieser Seite funktionieren nicht mehr, da Glitch das Hosting beendet hat.

In diesem Beitrag erfahren Sie, wie einige beliebte Animationen auf CodePen erstellt wurden. Diese Animationen verwenden alle die leistungsstarken Techniken, die in anderen Artikeln in diesem Abschnitt erläutert werden.

Unter Warum sind manche Animationen langsam? finden Sie die Theorie hinter diesen Empfehlungen und im Leitfaden für Animationen praktische Tipps.

Animation für das Laden des Assistenten

Ladeanimation des View Wizard auf CodePen

Diese Ladeanimation wurde vollständig mit CSS erstellt. Das Bild und die gesamte Animation wurden in CSS und HTML erstellt, ohne Bilder oder JavaScript. Mit den Chrome-Entwicklertools können Sie nachvollziehen, wie sie erstellt wurde und wie gut sie funktioniert.

Animation mit den Chrome-Entwicklertools prüfen

Öffnen Sie während der Animation den Tab „Leistung“ in den Chrome-Entwicklertools und zeichnen Sie einige Sekunden der Animation auf. In der Zusammenfassung sollte zu sehen sein, dass der Browser beim Ausführen dieser Animation keine Layout- oder Paint-Vorgänge ausführt.

Zusammenfassung nach der Profilerstellung für die Animation des Assistenten.

Wenn Sie wissen möchten, wie diese Animation ohne Layout- und Paint-Vorgänge erstellt wurde, prüfen Sie eines der beweglichen Elemente in den Chrome-Entwicklertools. Im Animationsbereich können Sie die verschiedenen animierten Elemente finden. Wenn Sie auf ein Element klicken, wird es im DOM hervorgehoben.

Elemente im Bereich „Animationen“ der Chrome-Entwicklertools ansehen und auswählen.

Wählen Sie beispielsweise das Dreieck aus und beobachten Sie, wie sich das Element während des Fluges, der Drehung und der Rückkehr zur Startposition verändert.

Video, das zeigt, wie wir den Pfad des Dreiecks in den Chrome-Entwicklertools verfolgen können.

Sehen Sie sich das Steuerfeld „Stile“ an, während das Element noch ausgewählt ist. Dort sehen Sie den CSS-Code, der die Form des Dreiecks zeichnet, und die verwendete Animation.

Funktionsweise

Das Dreieck wird mit dem Pseudoelement ::after erstellt, um generierten Inhalt hinzuzufügen. Die Form wird mit Rahmen erstellt.

.triangle {
    position: absolute;
    bottom: -62px;
    left: -10px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
}

.triangle::after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 28px 48px 28px;
    border-color: transparent transparent #89beb3 transparent;
}

Hinweis: Weitere Informationen zum Erstellen von Formen mit Rahmen und generierten Inhalten finden Sie unter The Shapes of CSS.

Die Animation wird mit der folgenden CSS-Zeile hinzugefügt:

animation: path_triangle 10s ease-in-out infinite;

In den Chrome-Entwicklertools können Sie die Keyframes finden, indem Sie im Bereich „Stil“ nach unten scrollen. Dort sehen Sie, dass die Animation mit transform erstellt wird, um die Position des Elements zu ändern und es zu drehen. Das Attribut transform ist eines der im Leitfaden zu Animationen beschriebenen Attribute, die den Browser nicht dazu veranlassen, Layout- oder Paint-Vorgänge auszuführen (die Hauptursachen für langsame Animationen).

@keyframes path_triangle {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-172px) translatex(10px) rotate(-10deg);
  }
  55% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  58% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  63% {
    transform: rotate(-360deg);
  }
}

Für die verschiedenen beweglichen Teile dieser Animation werden ähnliche Techniken verwendet. Das Ergebnis ist eine komplexe Animation, die reibungslos abläuft.

Pulsierender Kreis

Pulsierenden Kreis auf CodePen ansehen

Diese Art von Animation wird manchmal verwendet, um die Aufmerksamkeit auf etwas auf einer Seite zu lenken. Mit den Firefox-Entwicklertools können Sie die Animation nachvollziehen.

Animation mit den Firefox-Entwicklertools prüfen

Öffnen Sie während der Animation den Tab „Leistung“ in den Firefox-Entwicklertools und zeichnen Sie einige Sekunden der Animation auf. Beenden Sie die Aufzeichnung. Im Wasserfalldiagramm sollten keine Einträge für Stil neu berechnen zu sehen sein. Sie wissen jetzt, dass diese Animation keine Neuberechnung des Stils und daher keine Layout- und Paint-Vorgänge verursacht.

Firefox-Entwicklertools – Wasserfalldiagramm

Bleiben Sie in den Firefox-Entwicklertools und prüfen Sie den Kreis, um zu sehen, wie diese Animation funktioniert. Das <div>-Element mit der Klasse pulsating-circle markiert die Position des Kreises, zeichnet aber selbst keinen Kreis.

.pulsating-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 30px;
    height: 30px;
}

Der sichtbare Kreis und die Animationen werden mit den Pseudoelementen ::before und ::after erstellt.

Das Element ::before erstellt den undurchsichtigen Ring, der sich außerhalb des weißen Kreises befindet. Dazu wird eine Animation namens pulse-ring verwendet, die transform: scale und opacity animiert.

.pulsating-circle::before {
    content: '';
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #01a4e9;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

Eine weitere Möglichkeit, um zu sehen, welche Eigenschaften animiert werden, ist die Auswahl des Bereichs Animationen in den Firefox-Entwicklertools. Sie sehen dann eine Visualisierung der verwendeten Animationen und der animierten Eigenschaften.

Wenn das Pseudoelement „::before“ ausgewählt ist, können wir sehen, welche Eigenschaften animiert werden.

Der weiße Kreis selbst wird mit dem Pseudoelement ::after erstellt und animiert. In der Animation pulse-dot wird transform: scale verwendet, um den Punkt während der Animation zu vergrößern und zu verkleinern.

.pulsating-circle::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}

Eine solche Animation kann an verschiedenen Stellen in Ihrer Anwendung verwendet werden. Es ist wichtig, dass diese kleinen Details die Gesamtleistung Ihrer App nicht beeinträchtigen.

Pure CSS 3D sphere

Pure CSS 3D Sphere auf CodePen ansehen

Diese Animation sieht unglaublich kompliziert aus, verwendet aber Techniken, die wir bereits in den vorherigen Beispielen gesehen haben. Die Komplexität ergibt sich aus der Animation einer großen Anzahl von Elementen.

Öffnen Sie die Chrome-Entwicklertools und wählen Sie eines der Elemente mit der Klasse plane aus. Die Kugel besteht aus einer Reihe rotierender Ebenen und Speichen.

Das Flugzeug scheint sich zu drehen.

Hinweis: Mit dem DOM-Suchtool in den Chrome-Entwicklertools können Sie ein Element, das Sie prüfen möchten, leichter finden.

Diese Ebenen und Speichen befinden sich in einem Wrapper-<div>, der mit transform: rotate3d gedreht wird.

.sphere-wrapper {
  transform-style: preserve-3d;
  width: 300px;
  height: 300px;
  position: relative;
  animation: rotate3d 10s linear infinite;
}

@keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

Die Punkte befinden sich in den Elementen plane und spoke. Sie verwenden eine Animation, die sie mithilfe von „transform“ skaliert und verschiebt. Dadurch entsteht der pulsierende Effekt.

Der Punkt dreht sich mit der Kugel und pulsiert.

.spoke-15 .dot,
.spoke-21 .dot {
  animation: pulsate 0.5s infinite 0.83333333s alternate both;
  background-color: #55ffee;
}

@-webkit-keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}

Die Arbeit an dieser Animation bestand darin, das richtige Timing zu finden, um den Dreh- und Pulseffekt zu erzeugen. Die Animationen selbst sind recht einfach und verwenden Methoden, die sehr gut funktionieren.

Sie können sich die Leistung dieser Animation ansehen, indem Sie die Chrome-Entwicklertools öffnen und die Leistung während der Ausführung aufzeichnen. Nach dem ersten Laden löst die Animation weder Layout noch Paint aus und läuft flüssig.

Fazit

Anhand dieser Beispiele können Sie sehen, wie Sie mit leistungsstarken Methoden einige sehr coole Animationen erstellen können, indem Sie nur wenige Eigenschaften animieren. Wenn du standardmäßig die im Leitfaden zu Animationen beschriebenen leistungsstarken Methoden verwendest, kannst du dich auf die Erstellung des gewünschten Effekts konzentrieren, ohne dir Gedanken darüber machen zu müssen, dass die Seite dadurch langsamer wird.