Über Rochester Oliveira
Ich bin ein Webdesigner und Unternehmer aus Itajubá (MG), Brasilien. Ich liebe es, über obskure Themen zu schreiben und coole Sachen zu machen.
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.
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:
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
Reine CSS Scrolling Cola Dose
Reiner CSS Walking Man
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):
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:
aktivieren deaktivieren
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:
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.
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:
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.
Wir erstellen zusammenklappbare Panels, die die CSS-Animationen verwenden. Hier ist die grundlegende HTML-Struktur:
Tab 1 TEXT 1 Tab 1 TEXT 1 Tab 2 TEXT 2
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? :)
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:
Gegenstand 1 Punkt 1 Punkt 11 Punkt 1.1 Punkt 12 Punkt 1.2
Und die Zauberei beginnt hier:
a {/ * macht die Links nur ein bisschen besser * / display: block; Polsterung: 4px; } nav {text-align: center; } / * 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 * / height: 0; Überlauf versteckt; / * Houdini Gefühle * / Übergang: Größe 1s; } nav li: hover> div {height: 56px; }}
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!