In diesem Beitrag erfahren Sie, wie einige beliebte Animationen auf CodePen erstellt wurden. Bei diesen Animationen werden die leistungsstarken Techniken verwendet, die in anderen Artikeln in diesem Abschnitt beschrieben werden.
Unter Warum sind manche Animationen langsam? erfahren Sie mehr über die Theorie hinter diesen Empfehlungen. Der Leitfaden zu Animationen enthält praktische Tipps.
Ladeanimation für den Assistenten
Ladeanimation des Einrichtungsassistenten auf CodePen ansehen
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 die Seite erstellt wurde und wie gut sie funktioniert.
Animation mit den Chrome-Entwicklertools prüfen
Öffnen Sie während der Ausführung der 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.
Wenn Sie herausfinden möchten, wie diese Animation ohne Layout- und Paint-Vorgänge erreicht wurde, sehen Sie sich eines der sich bewegenden Elemente in den Chrome-Entwicklertools an. Im Steuerfeld „Animationen“ können Sie die verschiedenen animierten Elemente finden. Wenn Sie auf ein Element klicken, wird es im DOM hervorgehoben.
Wählen Sie beispielsweise das Dreieck aus und sehen Sie sich an, wie sich das Feld des Elements während seines Fluges verändert, sich dreht und dann in die Ausgangsposition 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, sowie die verwendete Animation.
Funktionsweise
Das Dreieck wird mit dem Pseudo-Element ::after erstellt, um generierte Inhalte hinzuzufügen, und 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 DevTools finden Sie die Frames, indem Sie im Bereich „Style“ nach unten scrollen.
Dort sehen Sie, dass die Animation erstellt wird, indem Sie mit transform die Position des Elements ändern und es drehen.
Die Property transform ist eine der im Leitfaden zu Animationen beschriebenen Properties, die keine Layout- oder Malvorgänge im Browser auslöst. Diese sind 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 jeden der verschiedenen beweglichen Teile dieser Animation werden ähnliche Techniken verwendet. Das Ergebnis ist eine komplexe Animation, die flüssig abläuft.
Pulsierender Kreis
Pulsierenden Kreis auf CodePen ansehen
Diese Art der Animation wird manchmal verwendet, um auf etwas auf einer Seite aufmerksam zu machen. Mit den Firefox-Entwicklertools können Sie die Animation nachvollziehen.
Animation mit den Firefox-Entwicklertools prüfen
Öffnen Sie während der Ausführung der Animation den Tab „Leistung“ in den Firefox-Entwicklertools und zeichnen Sie einige Sekunden der Animation auf. Beenden Sie die Aufzeichnung. In der Abfolge sollten keine Einträge für Stil neu berechnen zu sehen sein. Sie wissen jetzt, dass diese Animation keine Stilneuberechnung und damit keine Layout- und Malvorgänge auslöst.
Sehen Sie sich in den Firefox DevTools den Kreis an, um zu sehen, wie diese Animation funktioniert.
Der <div> mit der Klasse pulsating-circle markiert die Position des Kreises, zeichnet aber 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. 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;
}
}
Sie können sich auch im Bereich Animationen in den Firefox DevTools ansehen, welche Eigenschaften animiert werden. Daraufhin wird eine Visualisierung der verwendeten Animationen und der animierten Properties angezeigt.
Der weiße Kreis selbst wird mit dem Pseudo-Element ::after erstellt und animiert.
Bei 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 sich diese kleinen Details nicht auf die Gesamtleistung Ihrer App auswirken.
Pure CSS 3D Sphere
Pure CSS 3D Sphere auf CodePen ansehen
Diese Animation wirkt unglaublich kompliziert, verwendet aber Techniken, die wir bereits in den vorherigen Beispielen kennengelernt 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 rotierenden Ebenen und Speichen.
Diese Ebenen und Spokes befinden sich innerhalb eines Wrappers <div>. Dieses Element wird mit transform: rotate3d rotiert.
.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 plane- und spoke-Elementen. Sie verwenden 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 war es wichtig, das richtige Timing zu bestimmen, um den Dreh- und Pulseffekt zu erzeugen. Die Animationen selbst sind recht einfach und es werden Methoden verwendet, die eine sehr gute Leistung bieten.
Sie können die Leistung dieser Animation prüfen, indem Sie die Chrome-Entwicklertools öffnen und die Leistung während der Ausführung erfassen. Nach dem ersten Laden löst die Animation weder „Layout“ noch „Paint“ aus und läuft reibungslos.
Fazit
Anhand dieser Beispiele sehen Sie, wie Sie mithilfe leistungsstarker Methoden einige Eigenschaften animieren und so sehr coole Animationen erstellen können. Wenn Sie standardmäßig die leistungsstarken Methoden verwenden, die im Leitfaden zu Animationen beschrieben sind, können Sie sich darauf konzentrieren, den gewünschten Effekt zu erzielen, ohne sich zu viele Gedanken über die Verlangsamung der Seite machen zu müssen.