So nutzen Sie CSS3-Animationen: Lernprogramm, Beispielcodes und Beispiele

Wenn wir JS und jQuery verwenden, haben wir die volle Kontrolle über die Animationen und können einige großartige Effekte erstellen, aber der Preis ist ziemlich hoch. Verarbeitungszeit, browserübergreifende Kompatibilität (mobile Geräte sind beispielsweise in Bezug auf JS sehr unterschiedlich) und die Codekomplexität selbst sind Punkte, die wir bei der Erstellung animierter Schnittstellen berücksichtigen sollten.


Heute werden wir sehen, wie Sie JS mithilfe von CSS-Animationen und -Übergängen vermeiden können. Wir werden von den grundlegenden Schritten bis zu einigen fantastischen Effekten wie Akkordeon-Panels und animierten Untermenüs diskutieren.

Nehmen Sie Platz, Ihren Notizblock und einen echten Browser (alles andere als IE) und legen Sie los.

Aufwärmen

Wir haben einige Vor- (und Nachteile wie alles in unserem Leben) bei der Verwendung von CSS-Animationen. Wenn Sie diese an Ihren Chef oder Kunden verkaufen müssen, sollten Sie Folgendes beachten:

  • Sie sind möglicherweise schneller, da sie die Hardwarebeschleunigung nutzen können (als HTML5-Implementierungen).
  • Sie sind auf Mobilgeräten leistungsfähiger und benötigen keinen spezifischen Code, um Berührungsereignisse zu verfolgen
  • JS muss vom Browser interpretiert werden und die Möglichkeiten, den Browser zu beschädigen, sind viel größer. Wenn CSS fehlschlägt, schlägt es stillschweigend fehl, während JS die gesamte Seite beschädigen kann
  • Sie haben eine recht gute Browserunterstützung (diese Website hilft Ihnen dabei, bestimmte Statistiken zu überprüfen: http://caniuse.com/#search)

Beispiele für CSS3-Animationen

Bevor wir mit dem Fleisch dieses Beitrags beginnen, schauen wir uns einige schöne Animationen an, die in reinem CSS erstellt wurden.

Reine CSS Twitter Fail Whale

Animierter gescheiterter Wal

 Hergestellt von Steven Dennis, sehen Sie dies in Aktion.

Reine CSS Scrolling Cola-Dose
Beispiele für CSS 3-Animationen: Scrolling Coke Can

Hergestellt von Roman Cortes, sehen Sie dies in Aktion.

Reiner CSS Walking Man

Beispiele für CSS 3-Animationen: The Walking Man

 Hergestellt von Andrew Hoyer, sehen Sie dies in Aktion.

Deine Hände schmutzig machen

Beginnen wir mit dem Code. Wir werden häufig CSS-Pseudoklassen verwenden, um die Animation auszulösen. Um ehrlich zu sein, empfehlen viele Entwickler, JS zum Aktivieren und Deaktivieren von Animationen zu verwenden. Hier sehen wir jedoch den einfacheren Weg:

#Prüfung {
Hintergrund: rot;
}}
#test: hover {
Hintergrund: grün;
}}
#test: active {
Hintergrund: blau;
}}
#test: target {
Hintergrund: schwarz;
}}

Wir haben noch ein paar andere Pseudoklassen, aber Sie haben die Idee! Folgendes passiert also, wenn Sie auf das Element #test klicken (vorausgesetzt, es handelt sich um einen Link):

  • Normalzustand: Hintergrund ist rot
  • Hover: Wenn die Maus den Elementbereich betritt, wird ein grüner Hintergrund angezeigt
  • Aktiv: Wenn Sie mit dem Cursor darauf klicken und die Maustaste noch gedrückt ist, ist die Hintergrundfarbe blau
  • Ziel: Wenn die aktuelle Seite den #test in der URL hat, ist dieses Element schwarz

Jedes dieser Elemente kann für CSS-Animationen verwendet werden. Sie können beispielsweise zwei Links erstellen, um die CSS-Animation zu aktivieren und zu deaktivieren, indem Sie das Ziel-Pseudoelement mit diesem Code verwenden:

aktivieren Sie
deaktivieren

CSS-Übergänge

Der CSS-Übergang ändert sich reibungslos vom Anfangs- in den Endzustand. Sie definieren also in der Hauptauswahl mithilfe der Eigenschaft “Übergang” die Zeit und jede betroffene Eigenschaft sowie die Art und Weise, wie die Animation aussehen soll. Sehen wir uns ein Beispiel an:

.Prüfung {
/ * Timing-Funktion für die Dauer der Übergangseigenschaft, * /
Farbe blau;
Übergang: Farbe 2s, Schriftgröße 2s Easy-Out;
}}
.Test: Schwebeflug {
Farbe Rot;
}}
.Test: aktiv {
Schriftgröße: 200%;
}}

Wenn Sie mit der Maus über das .test-Element fahren, ändert sich die Farbe allmählich von blau nach rot (was für eine schöne Palette, oder?). Wenn Sie auf das Element klicken, wird die Schriftgröße schrittweise auf 200% der Standardschriftgröße erhöht.

Wir haben auch die Eigenschaft “Übergangszeitpunkt” festgelegt, mit der festgelegt wird, wie die für die Animation verfügbare “Zeit” verwendet wird. Hier sind die möglichen Werte:

  • Linear: Gleiche Geschwindigkeit von Anfang bis Ende
  • Leichtigkeit: Langsamer Start
  • Leichtigkeit: Langsames Ende
  • Leichtigkeit: Langsamer Start, schneller in der Mitte, dann langsames Ende
  • Ease-in-out: Langsamer Start, langsames Ende
  • Cubic-Bezier (a, b, c, d): Benutzerdefinierte Geschwindigkeit

Die kubische Bezier-Funktion erstellt eine benutzerdefinierte Animation mit 4 Zahlen, die von 0 bis 1 variieren und die mathematische Kurve für die Dauer der Animationsgeschwindigkeit X darstellen.

Für eine bessere Browserkompatibilität sollten Sie die Herstellerpräfixe für Oper, Firefox und Webkit wie folgt verwenden:

div {
Breite: 400px;
-o-Übergang: Breite 2s;
-Moz-Übergang: Breite 2s;
-Webkit-Übergang: Breite 2s;
Übergang: Breite 2s;
}}

Sie können die Medienabfragen auch verwenden, um je nach Browserbreite (mobile Geräte, Tablets) unterschiedliche Übergänge zu definieren. Dies ist ein einfaches Beispiel:

Körper {
Schriftgröße: 1em;
}}
@ Media-Bildschirm und (maximale Breite: 800 Pixel) {
Körper {
Schriftgröße: 0.8em;
}}
}}
@ Media-Bildschirm und (maximale Breite: 400 Pixel) {
Körper {
Schriftgröße: 0,7em;
}}
}}

Hier wird die Schriftgröße plötzlich geändert, wenn Sie die Browserbreite erhöhen. Dieser Code verhindert dies und sorgt für einen viel reibungsloseren Übergang:

Körper {
-o-Übergang: Schriftgröße .5s linear;
-Moz-Übergang: Schriftgröße .5s linear;
-Webkit-Übergang: Schriftgröße .5s linear;
Übergang: Schriftgröße .5s linear;
}}

Sie können dies auch verwenden, wenn Sie unterschiedliche Anzeigen oder Größen für Hoch- / Querformat haben, wenn Sie Breiten, Farben, Auffüllungen und Menüanzeigen ändern möchten.

CSS-Animation – Der wahre Spaß beginnt

Die Animation ist eine Folge von Übergängen, die in einem einzigen Selektor definiert sind. Um CSS-Animationen zu definieren, müssen Sie zwei Schritte ausführen.

Die @ keyframe-Regel wird verwendet, um eine Folge von Animationsschritten zu definieren. Sie wird durch einen eindeutigen Namen und die Stile definiert, die die Funktionsweise dieser Animation beschreiben. Wie üblich benötigen wir einige Herstellerpräfixe, wie in diesem Beispiel:

/ * der gleiche Code für jeden Anbieter * /
@ -o-keyframe my-animation { …
@ -moz-keyframe my-animation { …
@ -webkit-keyframe my-animation { …
/ * Name der Animation * /
@keyframe my-animation {
/ * Frame Selector * /
0% {
/ * Rahmenstil * /
Links: 0px;
Oben: 0px;
}}
25% {
Links: 200px;
Oben: 0px;
}}
50% {
Links: 200px;
Oben: 200px;
}}
75% {
Links: 0px;
Oben: 200px;
}}
100% {
Links: 0px;
Oben: 0px;
}}
}}

Daher wird jeder Stil durch den Frame / Zeitrahmen (wie die Frames aus einer Flash-Animation) als Prozentsatz und die Stile definiert, die dort angewendet werden sollen. Dieser Keyframe besagt beispielsweise, dass sich das Element nach links, dann nach oben, dann nach rechts und dann nach unten bewegt.

Nachdem Sie Schritt 1 ausgeführt und Ihren Keyframe erstellt haben, können Sie ihn tatsächlich auf ein Element anwenden. Dann verwenden wir so ziemlich die gleiche Logik wie beim CSS-Übergang. Der Unterschied besteht darin, dass unser „Übergang“ jetzt eine sehr komplexe Animation ist.

Um es anzuwenden, verwenden wir die Animationseigenschaft und sie hat 7 Untereigenschaften:

  • Name: diese eindeutige Kennung
  • Dauer: Wie lange dauert es von 0% bis 100%?
  • Timing-Funktion: ziemlich genau wie die Übergangs-Timing-Funktion
  • Verzögerung: Wie lange dauert es, bis die 0% gestartet sind?
  • Iterationszahl: Wie viele Wiederholungen werden wir haben (“unendlich” für eine Endlosschleife)
  • Richtung: normal oder alternativ (umgekehrt)
  • Wiedergabestatus: Wenn die Animation ausgeführt oder angehalten wird

Dadurch wird unsere Animation auf das Element #test angewendet, wenn es das Ziel der Seite ist:

#test: target {
/ * Animationsname | Dauer | Timing-Funktion | Verzögerung | Iterationszahl | Richtung | Spielzustand * /
Animation: my-animation 10s linear 0s unendlich normal laufen;
}}

In diesem Sinne können wir einige großartige Beispiele erstellen.

Nur CSS Akkordeon

Wir erstellen zusammenklappbare Bedienfelder unter Verwendung der CSS-Animationen. Hier ist die grundlegende HTML-Struktur:

Tab 1

TEXT 1

Tab 2

TEXT 2

Tab 3

TEXT 3

Dadurch werden nur die Bedienfelder und der Link erstellt, der die einzelnen Bereiche auslöst. Und hier passiert die Magie:

/ * jede Div, die sich innerhalb des Akkordeons befindet * /
.Akkordeon div {
/ * ist standardmäßig ausgeblendet * /
Höhe: 0;
Überlauf versteckt;
/ * die schwarze Magie * /
Übergang: Höhe 1s;
}}
/ * wenn das erwähnte div das Ziel ist * /
.Akkordeon div: Ziel {
/ * height: auto funktioniert nicht, aber das funktioniert einwandfrei * /
Höhe: 80px;
}}

Ziemlich einfach, oder? Und Sie haben Ihr ganzes Leben damit verbracht, JS dafür zu verwenden? :) :)

Nur CSS-Menü mit Untermenüs

Und dies ist eine weitere recht einfache Anwendung. Sie haben sicherlich ein Navigationsmenü auf Ihrer Site, und oft müssen wir dort einige Untermenüs verwenden. Der beste Weg, Elemente ein- und auszublenden, ist die Verwendung von jQuery, oder? Denken Sie noch einmal nach, nachdem Sie diesen Code getestet haben:

  • Gegenstand 1
    • Punkt 1.1
    • Punkt 1.2
  • Punkt 2
    • Punkt 2.1
    • Punkt 2.2

Und hier beginnt die Zauberei:

ein {
/ * nur die Links ein bisschen besser machen * /
Bildschirmsperre;
Polsterung: 4px;
}}
nav {
Textausrichtung: Mitte;
}}
/ * ein beliebiges Menü (einschließlich des Hauptmenüs) * /
nav ul {
Anzeige: Inline-Block;
Listenstil: keine;
}}
nav>ul>li {
/ * horizontale Elemente (vertikal funktioniert auch gut) * /
float: left;
}}
nav li div {
/ * Untermenü reduzieren * /
Höhe: 0;
Überlauf versteckt;
/ * Houdini Gefühle * /
Übergang: Höhe 1s;
}}
nav li: schwebe>div {
Höhe: 56px;
}}

Zusammenfassen

Dies ist sicherlich nur eine Anleitung für den Einstieg. Es gibt viele andere coole Effekte, die nur mit CSS-Animationen ausgeführt werden können, und viele Dinge, die sicherlich noch kommen werden.

Hast du das schon mal benutzt? Können Sie sich eine andere gute Anwendung für CSS-Animationen vorstellen? Teilen Sie Ihre Gedanken mit den Kommentaren!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map