Animationen im Internet sind nicht neu. Sie wurden verwendet, um viele Ziele zu erreichen, unter anderem, um etwas interessanter anzusehen oder sogar noch ansprechender zu gestalten. Manchmal ist es das, was eine Website von der Konkurrenz abhebt!
Durch Animationen können UI-Elemente der realen Welt ähneln, sodass sie sich reibungslos ändern und gleichzeitig das Gefühl von Kontinuität, Action und Fortschritt vermitteln, anstatt sich im Handumdrehen zu ändern.
Selbst wenn Animationen auf kleine Elemente angewendet werden, können sie dem Benutzer helfen, sich daran zu erinnern, ob eine Aktion ausgeführt wurde oder nicht. Tatsächlich erinnert sich der Benutzer eher daran, was er/sie gerade getan hat, nachdem er bemerkt hat, dass sich etwas nach und nach verändert hat, als an alles auf einmal. Eine einfache Animation für einen Ladebildschirm sagt mehr aus, als nur mit einer weißen Seite zu warten. Es ist der Unterschied zwischen dem Wissen, dass noch etwas passiert, und der Frage, ob die Seite kaputt ist.
Es gibt viele verschiedene Möglichkeiten, eine Animation auf einer Webseite zu erstellen. Sie können eine vorgefertigte Animation aus einer GIF-Datei verwenden und sie als normales Bild verwenden. Dies kann einfach sein, Sie verlieren jedoch die Möglichkeit, diese Animation innerhalb des Codes zu ändern. Das Manipulieren von HTML-Elementen mithilfe von JavaScript ist ebenfalls möglich, jedoch ist es in Bezug auf die Berechnung oft etwas zu teuer. Fühlen Sie sich auch frei, CSS zu verwenden und mehrere Stile definieren von einem Element zu glatt Veränderung im Laufe der Zeit. Dies wird nicht nur einfacher sein, sondern es dem Browser auch ermöglichen, Leistung und Effizienz zu optimieren.
CSS bietet zwei verschiedene Arten von Animationen. Der erste ist der Übergangseigenschaft, das häufig für Hover-Effekte und andere Benutzerinteraktionen verwendet wird. Der zweite ist der Animationseigenschaft, wodurch fortlaufendere Animationen oder, wie wir später sehen werden, Animationen mit mehr Stufen erstellt werden können. Schauen Sie sich unten das Beispiel für die Auswirkungen dieser beiden Eigenschaften auf den Codepen an (wenn Sie nicht wissen, was Codepen ist, überprüfen Sie unser Artikel über dieses tolle Tool zum Teilen von Codeschnipseln):
Den Stift ansehen Arten von Animationen von Patrícia Silva (@patsilva_tese) auf Code Pen.
Um einfache oder komplexere CSS-Animationen zu erstellen, müssen Sie zwei Schlüsselelemente beherrschen: Timing der Animation und Innere Komponenten. Eine Animation ohne Zeitzugehörigkeit ist dasselbe wie ohne Animation, da sie sich lediglich sofort ändert. Die Verwendung innerer Komponenten erleichtert das Leben, da es viel wahrscheinlicher ist, dass mehr als ein Element benötigt wird, um Animationen zu verbessern. Schauen wir sie uns an:
Um eine reibungslose Animation oder einen reibungslosen Übergang zu erstellen, ist es wichtig, Zeitlimits zu definieren. Auf beiden Übergang und Animation Immobilien, die wir haben Dauer, das sagt, wie viel Zeit es dauert, von Anfang bis Ende zu gehen, was durch die erste Zeiteinheit (Sekunden oder Millisekunden) definiert wird. Dann die Verzögerung, das bestimmt, wie lange das Element wartet, bis die Animation beginnt, und wird durch die zweite Zeiteinheit definiert.
Unten finden Sie vier Beispiele, die die vielfältigen Effekte zeigen, die verschiedene Werte erzeugen können: zwei Hover-Effekte (einer mit einer Dauer von 0 Sekunden und ein weiterer 0,5 Sekunden) sowie zwei Ladeeffekte (einer mit einer Verzögerung von 0 Sekunden und ein anderer mit 0,1 Sekunden, 0,2 Sekunden und 0,3 Sekunden für jedes der Quadrate).
Den Stift ansehen Timing der Animation von Patrícia Silva (@patsilva_tese) auf Code Pen.
Der zweite Schlüsselfaktor und das Geheimnis für anspruchsvollere Animationen ist die Verwendung innerer Komponenten. Wenn nur ein oder zwei zusätzliche Elemente benötigt werden, :vor und :nach Komponenten können verwendet werden, genau wie im Beispiel unten.
Sie können wie gewohnt in Ihrer CSS-Datei gestylt werden, es ist jedoch nicht erforderlich, sie im HTML zu definieren. Die zusätzlichen Elemente werden automatisch der Hauptkomponente zugeordnet, wobei der HTML-Code intakt bleibt. Der einzige Unterschied im CSS besteht darin, dass Sie das definieren müssen Inhalt der Immobilie dargestellt durch eine Zeichenfolge. Als Beispiel ist es so, als würde man den Text in einem Div im HTML beschreiben. Sehen Sie sich anhand des Beispiels mit dem Hover-Effekt unten an, wie die a:before-Komponente gestylt wurde und eine leere Zeichenfolge für die Eigenschaft content verwendet wurde, um nur diese kleine Ecke zu erstellen.
Falls die Animation mehr als zwei zusätzliche Elemente benötigt, Standard HTML-Komponenten kann verwendet werden. Ändern Sie die HTML-Struktur und integrieren Sie unformatierte Komponenten wie Bereiche, wenden Sie das Styling an und wenden Sie dann den Übergang oder die Animation an. Die Verwendung mehrerer Komponenten ist auch nützlich, wenn Sie einmal verschiedene Arten von Bewegungen ausgeführt haben Jede Komponente kann jeweils nur eine Animation oder einen Übergang aufnehmen. Das folgende Beispiel zeigt den Ladeeffekt: Es gibt ein Div namens Container mit vier Spannweiten darin, und der Container hat eine Animation, wodurch er größer wird. Schließlich hat jeder Bereich eine Animation, die ihn zum Rotieren bringt.
Also, wie wird ein Übergang umgesetzt? Als Erstes müssen Sie einen anfänglichen und endgültigen Stil/Zustand der beteiligten Elemente definieren, einschließlich der Komponenten:before und:after. Dann verwenden Sie den Übergangseigenschaft, es wird diese Komponenten darüber informieren, wie sie sich zwischen den beiden Staaten verhalten werden. Diese Übergangseigenschaft setzt sich aus vier weiteren Eigenschaften zusammen: Übergangsverzögerung und Übergangsdauer (das sind zeitbezogene Eigenschaften und wir haben sie bereits behandelt), Übergangseigenschaft und Transition-Timing-Funktion.
Den Stift ansehen Übergangseigenschaft von Patrícia Silva (@patsilva_tese) auf Code Pen.
Schauen wir uns an, was die letzten beiden Eigenschaften sind und wie sie funktionieren:
In diesem Teil des Übergangs können Sie angeben, welche Eigenschaften betroffen sein werden. Es kann auf „alle“ gesetzt werden, sodass alle Eigenschaften ausgewählt werden, die sich von einem Stil zum anderen ändern. Es kann sich aber auch um eine bestimmte Eigenschaft oder eine Reihe von Eigenschaften handeln. Dies ist sehr nützlich, wenn Sie unterschiedliche Zeiten oder Verhaltensweisen zwischen den verschiedenen Eigenschaften des Elements festlegen. Wenn Sie beispielsweise möchten, dass sich die Hintergrundfarbe viel schneller ändert als die Hintergrundfarbe, würden Sie Folgendes verwenden:
Die Timing-Funktion definiert die Geschwindigkeit des Übergangs und hat eine Reihe möglicher Werte:
Erfahren Sie im folgenden Beispiel, wie sich diese unterschiedlichen Werte auf eine Animation auswirken können. Beachten Sie, dass der Übergang den Überblick über sich selbst behalten kann. Wenn Sie die Maus schnell in die animierte Komponente hinein- und herausbewegen, wird die Animation bis zum Ende nicht vollständig ausgeführt: Sie wird zurückgesetzt.
Den Stift ansehen Mögliche Werte für die Übergangszeitfunktion von Patrícia Silva (@patsilva_tese) auf Code Pen.
Im Gegensatz zur Übergangseigenschaft ist es nicht erforderlich, die betroffenen Elementeigenschaften anzugeben und auch nicht einmal einen Anfangs- und Endzustand für die Animation zu definieren. Die Animationseigenschaft bietet aufgrund der Verwendung von Keyframes mehr Freiheit. Keyframes bestimmt die verschiedenen Stile/Zustände der Komponente mit einem Namen, der später für die Animationseigenschaft verwendet wird. Da es nur zwei Zustände hat, kann es verwendet werden „von“ und „zu“ um die ersten und letzten zu definieren. Wenn Sie jedoch mehr wollen, können Sie Prozentsätze verwenden und so etwas wie die Rotationsanimation für den Ladeeffekt angeben.
Genau wie die Übergangseigenschaft ist auch die Animationseigenschaft die Zusammensetzung anderer Eigenschaften. Sie sind: Animationsdauer, Animationsverzögerung und Animations-Timing-Funktion, die genauso funktionieren wie die Übergangsmodelle; Animationsname, wo der Name des Keyframes erscheint; Anzahl der Animationsiterationen, um zu bestimmen, wie oft die Animation ausgeführt wird, was eine bestimmte Anzahl von „unendlich“ sein kann; Animationsrichtung und Animationsfüllmodus.
Diese Eigenschaft gibt an, in welche Richtung die Animation auf dem ausgewählten Keyframe gerendert werden muss, sodass Sie einen der folgenden Werte wählen können:
Den Stift ansehen Animationsrichtung von Patrícia Silva (@patsilva_tese) auf Code Pen.
Sie fragen sich, was mit der Komponente nach Abschluss der Animation passiert? Die Eigenschaft animation-fill-mode hat die Antwort darauf. Dieser Wert gibt an, wie sich die Komponente außerhalb der Animationszeit, also vor und nach der Animation, verhalten kann:
Überprüfen Sie das Ergebnis der einzelnen Werte unten. Klicken Sie einfach auf eines der Felder, in denen die Animation eine Sekunde verzögert ist, und die Unterschiede werden deutlich.
Den Stift ansehen JJK BDEE von Patrícia Silva (@patsilva_tese) auf Code Pen.
Die Elementeigenschaften beider Animationstypen können fast geändert werden, sofern sie dargestellt durch Einheitswerte. So können Sie beispielsweise einen fließenden Übergang bei Farben, Höhen- und Breitenwerten, Rändern und Füllungen, Opazitäten, Transformationen usw. sehen. Bei den Rändern, der Position, dem Float, dem Hintergrundbild, der Schriftfamilie usw. werden Sie diesen Effekt jedoch nicht sehen.
Auch wenn Einheiten/numerische Eigenschaften problemlos geändert werden können, wirken sich nicht alle auf die gleiche Weise auf den Rendervorgang aus; einige können etwas schwerer sein als andere. Wenn ein Browser eine Webseite startet, durchläuft er einige Schritte: Der erste ist Raumaufteilung, der zweite ist Lackieren, und schließlich die Verbundwerkstoff. Wenn wir uns dafür entscheiden, eine Eigenschaft zu animieren, die das Layout auslöst, wie z. B. die Breite, wiederholt der Browser das Malen und Zusammensetzen. Aus diesem Grund werden Eigenschaften verwendet, die nur den zusammengesetzten Schritt aktivieren, wie transformieren und Opazität sollte priorisiert werden. Sie können das überprüfen vollständige Liste der CSS-Eigenschaften und ihrer Trigger.
Wie bereits erwähnt, ist die Transformationseigenschaft eine der kostengünstigsten zu animierenden Eigenschaften. Dies bedeutet jedoch nicht, dass es sich um eine begrenzte Eigenschaft handelt. Tatsächlich ermöglicht es, eine Menge davon mit dem Element zu tun, einschließlich:
Alle vorherigen Effekte werden auf die Mitte des Elements angewendet, sofern der Wert der Eigenschaft transform-origin nicht geändert wird. Bei diesem Wert kann es sich um 1 oder 2 Prozentsätze oder sogar um die folgenden Werte handeln: oben, unten, rechts, links und mittig.
Wenn Sie versucht haben, den Code einiger der vorherige Animationen hier abgebildet, vielleicht stellen Sie fest, dass wir ohne Verwendung der Transformationseigenschaft die ganze Zeit. Dies bedeutet jedoch nicht, dass Sie dieselben Animationen nicht nur mit Transformationen erstellen können. Um das zu zeigen, Wir haben beide Effekte mit der Eigenschaft transform erstellt. Schauen Sie sich unten alle erforderlichen Änderungen an; Sie werden überrascht sein, wie einfach es ist, den gleichen Effekt zu erzielen, ohne die HTML-Struktur zu ändern.
Den Stift ansehen vorherige Animationen mit Transform von Patrícia Silva (@patsilva_tese) auf Code Pen.
Durchgemachte Animationen Javascript werden verwaltet auf der Hauptthread des Browsers, in dem auch das Layout und das Malen stattfinden. CSS Animationen können, abhängig von den Eigenschaften, die geändert werden, in einem separaten Thread namens Compositor-Thread. Wenn der Browser für anspruchsvollere Aufgaben mehr Zeit benötigt, werden die Animationen des Hauptthreads beeinträchtigt und unterbrochen, wohingegen Compositor-Animationen nicht beeinträchtigt werden und weiterhin reibungslos laufen. Wenn Sie also Javascript wählen, ist es wahrscheinlicher, dass in Ihren Animationen Frames fehlen.
Zusammenfassend sollte das Erstellen von Animationen mit CSS und der Transform-Eigenschaft Priorität haben. Sie sind einfach zu handhaben, besonders für diejenigen, die bereits den Dreh raus haben und genau wissen, welche Ziele erreicht werden sollen. Dennoch ist es wichtig, vorsichtig mit der übermäßigen Verwendung von Animationen umzugehen, da dies zu Leistungsproblemen führen und für den Benutzer eine überwältigende Situation darstellen kann.
Webentwickler mit einer besonderen Liebe zum Frontend. Mutter von Katzen. In meiner Freizeit versuche ich, den Planeten zu retten, indem ich umweltfreundliche Alternativen teile.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
