In diesem Beitrag erfährst du, wie beliebte Animationen mit CodePen erstellt wurden. Für diese Animationen werden alle in anderen Artikeln in diesem Abschnitt erläuterten leistungsfähigen Techniken eingesetzt.
Unter Warum sind einige Animationen langsam? erfahren Sie mehr über die Theorie hinter diesen Empfehlungen. Praktische Tipps finden Sie im Leitfaden zu Animationen.
Assistent lädt Animation
Sehen Sie sich an, wie der Assistent die Animation in den CodePen lädt
Diese Ladeanimation wird vollständig mit CSS erstellt. Das Bild und alle Animationen wurden in CSS und HTML erstellt, ohne Bilder oder JavaScript. Wenn du wissen möchtest, wie sie erstellt wurde und wie gut sie funktioniert, kannst du die Chrome-Entwicklertools verwenden.
Animation mit den Chrome-Entwicklertools prüfen
Öffnen Sie während der Animation den Tab „Leistung“ in den Chrome-Entwicklertools und nehmen Sie ein paar Sekunden der Animation auf. In der Zusammenfassung sollten Sie sehen, dass der Browser während der Ausführung dieser Animation keine Layout- oder Paint-Vorgänge ausführt.
Wenn Sie herausfinden möchten, wie diese Animation ohne Layout- und Farbeffekt erzielt wurde, können Sie eines der beweglichen Elemente in den Chrome-Entwicklertools untersuchen. Über den Animationsbereich können Sie zu den verschiedenen animierten Elementen suchen. Wenn Sie auf ein Element klicken, wird es im DOM hervorgehoben.
Sie können beispielsweise das Dreieck auswählen und beobachten, wie sich der Kasten des Elements während seiner Fahrt in die Luft verändert, während es sich dreht und dann zur Startposition zurückkehrt.
Sehen Sie sich, während das Element immer noch ausgewählt ist, das Bedienfeld „Styles“ (Stile) an. Dort sehen Sie das CSS, mit dem die Form des Dreiecks gezeichnet wird, und die verwendete Animation.
Funktionsweise
Zum Erstellen des Dreiecks wird das Pseudoelement ::after verwendet, um generierte Inhalte mithilfe von Rahmen 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 Stilbereich nach unten scrollen.
Dort sehen Sie, dass die Animation mit transform erstellt wird, um die Position des Elements zu ändern und zu drehen.
Die transform-Eigenschaft ist eine der Eigenschaften, die in der Animationsanleitung beschrieben wird. Sie führt nicht dazu, dass der Browser Layout- oder Paint-Vorgänge ausführt. 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 die verschiedenen beweglichen Teile dieser Animation werden ähnliche Techniken verwendet. Das Ergebnis ist eine komplexe Animation, die reibungslos läuft.
Pulsierender Kreis
Pulsierenden Kreis auf dem CodePen ansehen
Diese Art von Animation wird manchmal verwendet, um die Aufmerksamkeit auf etwas auf einer Seite zu lenken. Um die Animation zu verstehen, kannst du die Entwicklertools von Firefox verwenden.
Animation mit den Firefox-Entwicklertools überprüfen
Öffnen Sie während der laufenden Animation den Tab „Leistung“ in den Firefox-Entwicklertools und nehmen Sie ein paar Sekunden der Animation auf. Beenden Sie die Aufzeichnung. In der Vermittlungsabfolge sollten Sie sehen, dass es keine Einträge für Stil neu berechnen gibt. Sie wissen jetzt, dass diese Animation keine Neuberechnung des Stils und somit keine Layout- und Paint-Vorgänge verursacht.
Wenn Sie in den Firefox-Entwicklertools bleiben, sehen Sie sich den Kreis an, um zu sehen, wie diese Animation funktioniert.
Das <div>-Objekt mit der Klasse pulsating-circle markiert die Position des Kreises, es wird jedoch kein Kreis selbst gezeichnet.
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
Der sichtbare Kreis und die Animationen werden mithilfe der Pseudoelemente ::before und ::after erstellt.
Das ::before-Element erstellt den opaken Ring, der sich außerhalb des weißen Kreises erstreckt, mithilfe 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 im Steuerfeld Animationen in den Firefox-Entwicklertools sehen, welche Eigenschaften animiert werden. Nun sehen Sie eine Visualisierung der verwendeten Animationen und der animierten Eigenschaften.
Der weiße Kreis selbst wird mit dem Pseudoelement ::after erstellt und animiert.
Für pulse-dot der Animation wird transform: scale verwendet, damit der Punkt während der Animation größer oder kleiner wird.
.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 App verwendet werden. Es ist wichtig, dass diese kleinen Berührungen die Gesamtleistung Ihrer App nicht beeinträchtigen.
Reines CSS 3D Sphere
Nur CSS 3D Sphere in CodePen ansehen
Diese Animation erscheint unglaublich kompliziert, verwendet jedoch Techniken, die wir bereits in den vorherigen Beispielen gesehen haben. Die Komplexität entsteht durch das Animieren 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 in einem Wrapper <div>. Dieses Element wird mithilfe von 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 sind in den Elementen plane und spoke verschachtelt. Sie verwenden eine Animation, die sie mithilfe von Transformation skaliert und übersetzt.
Dadurch entsteht ein pulsierender Effekt.
.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 wurde auf das richtige Timing gelegt, um den Dreh- und Pulseffekt zu erzeugen. Die Animationen selbst sind recht einfach und mit sehr guten Methoden.
Sie können die Leistung dieser Animation sehen, indem Sie die Chrome-Entwicklertools öffnen und die Leistung aufzeichnen, während sie ausgeführt wird. Nach dem ersten Laden löst die Animation kein Layout oder Paint aus und läuft reibungslos.
Fazit
An diesen Beispielen sehen Sie, wie das Animieren einiger Eigenschaften mit leistungsstarken Methoden einige sehr coole Animationen erzeugen kann. Wenn du standardmäßig die leistungsstarken Methoden verwendest, die im Animationsleitfaden beschrieben sind, kannst du deine Zeit nehmen, um den gewünschten Effekt zu erzielen, und musst dir keine Sorgen machen, dass die Seite langsam wird.