Beispiele für leistungsstarke CSS-Animationen

Rachel Andrew

In diesem Beitrag erfährst du, wie einige beliebte Animationen auf CodePen erstellt wurden. Für diese Animationen werden alle Darbietungstechniken eingesetzt, die in anderen Artikeln in diesem Abschnitt erläutert wurden.

Lesen Sie den Artikel Warum sind manche Animationen langsam?, um die Theorie dahinter zu erfahren. diese Empfehlungen und im Animationsleitfaden finden Sie praktische Tipps.

Assistent lädt Animation

Ladeanimation des Assistenten in CodePen ansehen

Diese Ladeanimation wird vollständig mit CSS erstellt. Das Bild und die gesamte Animation wurden in CSS und HTML erstellt. keine Bilder oder JavaScript. Wenn Sie wissen möchten, wie es erstellt wurde und wie gut es funktioniert, können Sie die Chrome-Entwicklertools verwenden.

Animation mit den Chrome-Entwicklertools prüfen

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

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

Um zu erfahren, wie diese Animation ohne Layout und Farbe umgesetzt wurde, die sich bewegenden Elemente in den Chrome-Entwicklertools ansehen. Über den Bereich „Animationen“ können Sie nach den verschiedenen animierten Elementen suchen. Wenn Sie auf ein Element klicken, wird es im DOM hervorgehoben.

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

Wählen Sie zum Beispiel das Dreieck, und beobachten, wie sich die Schachtel des Elements während seiner Reise in die Luft verändert. während es sich dreht und dann in die Startposition zurückkehrt.

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

Funktionsweise

Das Dreieck wird erstellt, indem mithilfe des Pseudoelements ::after generierte Inhalte hinzugefügt werden. mit Rahmen, um die Form zu erstellen.

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

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

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

In den Chrome-Entwicklertools finden Sie die Keyframes, indem Sie im Style-Steuerfeld nach unten scrollen. Dort sehen Sie, dass die Animation mithilfe von transform erstellt wurde, um die Position des Elements zu ändern und es zu drehen. Die Eigenschaft transform ist eine der Eigenschaften, die im Animationsleitfaden beschrieben werden. was den Browser nicht veranlasst, Layout- oder Paint-Vorgänge auszuführen (was die Hauptursachen für langsame Animationen sind).

@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 jeden der verschiedenen beweglichen Teile dieser Animation werden ähnliche Techniken verwendet. Das Ergebnis ist eine komplexe Animation, die reibungslos lä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. Zum besseren Verständnis der Animation können Sie die Firefox-Entwicklertools verwenden.

Animation mit den Firefox-Entwicklertools prüfen

Öffnen Sie bei laufender Animation den Tab „Leistung“ in den Firefox-Entwicklertools und zeichnen Sie einige Sekunden der Animation auf. Beenden Sie die Aufzeichnung. in der Vermittlungsabfolge sollten Sie sehen, dass für Stil neu berechnen keine Einträge vorhanden sind. Sie wissen jetzt, dass diese Animation keine Neuberechnung des Stils bewirkt, Layout- und Paint-Operationen.

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

In den Firefox-Entwicklertools überprüfen Sie den Kreis, um zu sehen, wie diese Animation funktioniert. <div> mit der Klasse pulsating-circle markiert die Position des Kreises. aber sie zeichnet 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.

Mit dem Element ::before wird der opake Ring erstellt, der sich außerhalb des weißen Kreises erstreckt. mit einer Animation namens pulse-ring, 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;
  }
}

Sie können auch den Bereich Animationen in den Firefox-Entwicklertools aufrufen, um zu sehen, welche Eigenschaften animiert werden. Sie sehen dann eine Visualisierung der verwendeten Animationen, und die animierten Eigenschaften.

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 Anpassungen keine Auswirkungen auf die Gesamtleistung Ihrer App haben.

CSS 3D Sphere – reines Design

Pure CSS 3D Sphere auf CodePen ansehen

Diese Animation wirkt sehr kompliziert, Es werden jedoch Techniken verwendet, die wir bereits in den vorherigen Beispielen gesehen haben. Die Komplexität ergibt sich aus der Animation einer großen Anzahl von Elementen.

Öffne die Chrome-Entwicklertools und wähle eines der Elemente mit der Klasse plane aus. Die Kugel besteht aus rotierenden Ebenen und Speichen.

Diese Ebenen und Spokes befinden sich in einem Wrapper <div>, Dieses Element wird mit transform: rotate3d gedreht.

.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 verschachtelt in den Elementen plane und spoke. verwenden sie eine Animation, bei der sie mithilfe von Transformationen skaliert und übersetzt werden. Dadurch entsteht der Pulseffekt.

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

Bei der Erstellung dieser Animation geht es um das richtige Timing, um den Dreh- und Pulseffekt zu erzeugen. Die Animationen selbst sind ziemlich einfach, und Methoden anwenden, die sehr gut funktionieren.

Sie können sich ansehen, wie diese Animation abschneidet, indem Sie die Chrome-Entwicklertools öffnen und die Leistung während der Ausführung aufzeichnen. Nach dem anfänglichen Laden löst die Animation weder Layout noch Paint aus, und läuft reibungslos.

Fazit

Anhand dieser Beispiele können Sie sehen, dass durch die Animation einiger Eigenschaften mit leistungsfähigen Methoden einige sehr coole Animationen entstehen können. Standardmäßig die leistungsfähigen Methoden, die im Animationsleitfaden beschrieben sind können Sie sich darauf konzentrieren, den gewünschten Effekt zu erzielen.