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

Wenn wir JS und jQuery verwenden, haben wir volle Kontrolle über die Animationen und wir können einige tolle Effekte erstellen, aber der Preis ist ziemlich hoch. Verarbeitungszeit, browserübergreifende Kompatibilität (mobile Geräte zum Beispiel sind bei JS sehr unterschiedlich) und die Komplexität des Codes selbst sind Punkte, die wir bei der Erstellung von animierten Schnittstellen beachten sollten.

Heute werden wir sehen, wie man JS mit CSS-Animationen und Übergängen vermeidet. Wir werden von den grundlegenden Schritten zu einigen tollen Effekten, wie Akkordeon-Panels und animierten Untermenüs, sprechen.

Schnapp dir einen Platz, deinen Notizblock und einen echten Browser (alles außer IE) und lass uns anfangen.

Aufwärmen

Wir haben einige Vorteile (und Nachteile wie alles in unserem Leben) in 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 Hardwarebeschleunigung verwenden können (als HTML5-Implementierungen)
• Sie werden in Mobilgeräten besser funktionieren und benötigen keinen spezifischen Code zum Verfolgen von Berührungsereignissen
• JS muss vom Browser interpretiert werden und die Möglichkeiten, den Browser zu knacken, sind viel größer. Wenn also CSS fehlschlägt, schlägt es automatisch fehl, während JS die gesamte Seite durchbrechen kann
• Sie haben eine ziemlich gute Browser-Unterstützung (diese Seite wird Ihnen helfen, bestimmte Statistiken zu überprüfen: http://caniuse.com/#search )

Beispiele für CSS3-Animationen

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

Reines CSS Twitter Fail Whale

Gemacht von Steven Dennis, Sehen Sie das in Aktion.

Reine CSS Scrolling Cola Dose

Hergestellt von Roman Cortes, Sehen Sie das in Aktion.

Reiner CSS Walking Man

Hergestellt von Andrew Hoyer, Sehen Sie das in Aktion.

Deine Hände schmutzig bekommen

Lass uns den Code starten. Wir werden eine Menge CSS-Pseudoklassen verwenden, um die Animation auszulösen. Um ehrlich zu sein, empfehlen viele Entwickler, JS zu verwenden, um Animationen zu aktivieren und zu deaktivieren, aber hier sehen wir den einfacheren Weg:

#test {Hintergrund: rot; } #test: hover {hintergrund: grün; } #test: aktiv {Hintergrund: blau; } #test: target {background: schwarz; }

Wir haben ein paar andere Pseudo-Klassen zu verwenden, aber Sie haben die Idee! Was passiert also, wenn Sie auf das #test-Element klicken (vorausgesetzt, es handelt sich um einen Link):

• Normaler Zustand: Hintergrund wird rot sein
• Hover: Wenn die Maus in den Elementbereich eindringt, hat sie einen grünen Hintergrund
• Aktiv: Wenn Sie den Cursor darauf klicken und die Maustaste gedrückt bleibt, ist die Hintergrundfarbe blau
• Ziel: Wenn die aktuelle Seite den # Test in der URL hat, wird dieses Element schwarz sein

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

<a href='#test'> aktivieren </a> <a href='#'> deaktivieren </a>

CSS-Übergänge

Der CSS-Übergang ändert sich problemlos vom Anfangs- zum Endzustand. Sie definieren also im Hauptselektor mit der Eigenschaft "transition" die Zeit und jede Eigenschaft, die betroffen sein soll und wie die Animation sein soll. Lass uns ein Beispiel sehen:

.test {/ * Übergangseigenschaft Dauer Timing-Funktion, * / Farbe: blau; Übergang: Farb-2s, 2s mit Schriftgröße; } .test: hover {color: red; } .test: aktiv {Schriftgröße: 200%; }

Wenn Sie das Element .test bewegen, ändert sich die Farbe von Blau zu 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 "Übergangstiming" -Eigenschaft, die so eingestellt ist, dass die für die Animation verfügbare "Zeit" ausgegeben wird. Hier sind die möglichen Werte:

• Linear: Gleiche Geschwindigkeit vom Anfang bis zum Ende
• Ease-in: Langsamer Start
• Ease-out: Langsames Ende
• Leichtigkeit: Langsamer Start, schnell in der Mitte, dann langsames Ende
• Ease-in-Out: Langsamer Start, langsames Ende
• Kubisch-Bezier (a, b, c, d): Benutzerdefinierte Geschwindigkeit

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

Für eine bessere Browser-Kompatibilität sollten Sie die Hersteller-Präfixe für Oper, Firefox und Webkit wie folgt verwenden:

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

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

body {font-size: 1em; } @media screen und (max-width: 800px) {body {font-size: 0.8em; }} @media screen und (max-width: 400px) {body {Schriftgröße: 0.7em; }}

Hier wird die Schriftgröße plötzlich geändert, wenn Sie die Browserbreite erhöhen. Dieser Code wird verhindern, dass dies geschieht, was zu einem viel glatteren Übergang führt:

body {-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 verschiedene Anzeigen oder Größen für Hoch- / Querformat haben, wenn Sie Breiten, Farben, Polsterungen, Menüanzeige ändern möchten.

CSS Animation - Der echte Spaß beginnt

Die Animation ist eine Sequenz von Übergängen, die in einem einzelnen Selektor definiert sind. Um CSS-Animationen zu definieren, müssen Sie den 2-Schritten folgen.

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

/ * derselbe Code für jeden Hersteller * / @ -o-Keyframe my-animation {... @ -moz-keyframe my-animation {... @ -webkit-keyframe my-animation {... / * Animationsname * / @keyframe my-animation {/ * Rahmenauswahl * / 0% {/ * Rahmenstil * / Links: 0px; Oben: 0px; } 25% {Left: 200px; Oben: 0px; } 50% {Left: 200px; Oben: 200px; } 75% {Left: 0px; Oben: 200px; } 100% {Left: 0px; Oben: 0px; }}

So wird jeder Stil durch den Rahmen / Zeitrahmen (wie die Rahmen aus einer Flash-Animation) als Prozentsatz und die Stile definiert, die dort angewendet werden sollen. Dieses Schlüsselbild sagt beispielsweise, dass das Element nach links, dann nach oben, dann nach rechts und dann nach unten verschoben wird.

Nachdem Sie den Schritt 1 verfolgt und Ihren Keyframe erstellt haben, können Sie ihn auf ein Element anwenden. Dann verwenden wir die gleiche Logik wie beim CSS-Übergang. Der Unterschied besteht darin, dass unser "Übergang" eine sehr komplexe Animation ist.

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

• Name: Diese eindeutige Kennung
• Dauer: Wie lange dauert es von 0% zu 100%?
• Timing-Funktion: entspricht in etwa der Timing-Funktion des Übergangs
• Verzögerung: Wie lange dauert es, bis der 0% startet?
• Iterationszählung: Wie viele Wiederholungen haben wir ("unendlich" für eine Endlosschleife)
• Richtung: normal oder abwechselnd (rückwärts)
• Play-state: Wenn die Animation läuft oder pausiert

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

#test: Ziel {/ * Animationsname | Dauer | Timing-Funktion | Verzögerung | Iterationszahl | Richtung | play-state * / animation: my-animation 10s lineare 0s unendlicher Normalbetrieb; }

In diesem Sinne können wir ein paar tolle Beispiele erstellen.

CSS Nur Akkordeon

Wir erstellen zusammenklappbare Panels, die die CSS-Animationen verwenden. Hier ist die grundlegende HTML-Struktur:

<div class = "accordion"> <a href="#tab1"> Registerkarte 1 </a> <div id = "tab1"> <p> TEXT 1 </ p> </ div> <a href = "# tab2 "> Registerkarte 2 </a> <div id =" tab2 "> <p> TEXT 2 </ p> </ div> <a href="#tab3"> Registerkarte 3 </a> <div id =" tab3 "> <p> TEXT 3 </ p> </ div> </ div>

Dadurch werden nur die Panels und der Link erstellt, der jeden von ihnen auslöst. Und hier passiert die Magie:

/ * jedes div innerhalb des Akkordeons * / .accordion div {/ * ist standardmäßig ausgeblendet * / height: 0; Überlauf versteckt; / * die schwarze Magie * / Übergang: Höhe 1s; } / * Wenn das erwähnte div das Ziel ist * / .accordion div: target {/ * height: auto funktioniert nicht, aber dies funktioniert gut * / height: 80px; }

Ziemlich einfach, nicht wahr? Und du hast dein ganzes Leben damit verbracht, JS zu benutzen? :)

Nur CSS-Menü mit Untermenüs

Und das ist eine weitere ziemlich einfache Anwendung. Sie haben sicherlich ein Navigationsmenü in Ihrer Site, und oft müssen wir dort einige Untermenüs verwenden. Der beste Weg, um Objekte ein- und auszublenden, ist die Verwendung von jQuery, richtig? Nun, denken Sie noch einmal nach dem Testen dieses Codes nach:

<nav> <ul> <li> <a href='#item1'> Artikel 1 </a> <div> <ul> <li> <a href='#item11'> Artikel 1.1 </a> </ li> <li> <a href='#item12'> Element 1.2 </a> </ li> </ ul> </ div> </ li> <li> <a href='#item2'> Element 2 </a> <div> <ul> <li> <a href='#item21'> Artikel 2.1 </a> </ li> <li> <a href='#item22'> Artikel 2.2 </a> </ li> </ ul> </ div> </ li> </ ul> </ nav>

Und die Zauberei beginnt hier:

a {/ * macht die Links etwas besser * / display: block; Auffüllen: 4px; } nav {text-align: center; } / * beliebiges Menü (einschließlich des Hauptmenüs) * / nav ul {display: Inline-Block; Listenstil: keine; } nav> ul> li {/ * horizontale Elemente (vertikal funktioniert auch gut) * / float: left; } nav li div {/ * Minimieren eines beliebigen Untermenüs * / height: 0; Überlauf versteckt; / * Houdini Gefühle * / Übergang: Höhe 1s; } nav li: hover> div {height: 56px; }

Summieren

Dies ist sicherlich nur ein Leitfaden für die ersten Schritte. Es gibt eine Menge anderer cooler Effekte, die mit CSS-Animationen und vielen anderen Dingen erledigt werden können.

Also, 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!