Erstellen Sie eine lustige Fototauschanimation mit CSS-Keyframes

CSS-Keyframe-Animationen eröffnen vielfältige Möglichkeiten für das, was mit CSS erreicht werden kann. Mit Keyframes können nicht nur einfache, einstufige Übergänge, sondern komplexe, mehrstufige Animationen erstellt werden, die sehr beeindruckend sind.

Im heutigen Projekt werden wir bei Null anfangen und einen Stapel von zwei Fotos erstellen, die sich ausbreiten und ihre Stapelreihenfolge vertauschen, wenn Sie darüber fahren. Auf dem Weg werden wir alles darüber lernen, wie man Keyframes wie einen Profi benutzt und all diese Headspinning-Präfixe jongliert!

Was wir bauen

Das Konzept für dieses Projekt ist ziemlich einfach. Stellen Sie sich zwei Fotos vor, die zufällig gedreht und aufeinander gestapelt wurden, als hätten Sie sie auf einen Schreibtisch geworfen. Das Problem ist, dass Sie das Foto nur wirklich sehen können!

Damit das untere Foto die Aufmerksamkeit erhält, die es verdient, erstellen wir ein Hover-Ereignis, das zuerst die beiden Fotos trennt und dann das obere Foto hinter das untere Foto schiebt und die Stapelreihenfolge effektiv ändert.

Wahrscheinlichkeiten sind, wenn Sie diesen Blog lesen, sind Sie ein visueller Denker, also sieht das in Bildern so aus:

Keyframe-Animationen vs. Übergänge

CSS bietet derzeit zwei Hauptoptionen zum Animieren eines Elements: Übergänge und Keyframes. Jedes Mal, wenn Sie etwas animieren möchten, müssen Sie die Situation analysieren und entscheiden, welche Methode geeignet ist. Zum Glück ist die Entscheidung zwischen den beiden sehr einfach.

Wenn Sie eine einfache Animation mit nur einem Schritt haben, ist ein Übergang die perfekte Lösung. Wenn Sie zum Beispiel etwas drehen möchten, wenn Sie den Mauszeiger darüber bewegen, wird der Effekt wahrscheinlich durch einen Übergang hervorgerufen. Sie legen einfach den ursprünglichen Zustand, dann den gedrehten Zustand und den Übergang zwischen den beiden fest.

Nun stellen Sie sich vor, Sie wollten diese Idee weiterführen und ein animiertes Zifferblatt erstellen, das Sie sehen könnten, um einen Safe zu knacken. Wahrscheinlich möchten Sie, dass es für eine Sekunde im Uhrzeigersinn gedreht wird, dann gegen den Uhrzeigersinn und dann vielleicht wieder im Uhrzeigersinn. Für dieses Szenario möchten Sie definitiv eine Keyframe-Animation verwenden.

Welche sollten wir verwenden?

Oben haben wir die Animation beschrieben, die wir erreichen möchten. Natürlich wird es ziemlich komplex. Mehrere Objekte bewegen sich hin und her, rotieren und tauschen ihre Stapelreihenfolge aus. Angesichts dieser Komplexität sind Keyframe-Animationen die logische Wahl.

Browser-Unterstützung

Es ist gut zu bedenken, dass sowohl Keyframes als auch Übergänge jetzt von den großen Browsern ziemlich anständig unterstützt werden. außer natürlich für IE. Soweit ich das beurteilen kann, werden weder Übergänge noch Animationen bis zum IE10 unterstützt, sodass Sie sich offensichtlich nicht auf die wichtigsten Funktionen verlassen möchten.

Quelle: CanIUse.com

Schritt 1. Das HTML

Genug aufgebaut, lass uns diesen Sauger bauen. Als erstes müssen Sie das Projekt in HTML auslegen. Das ist natürlich extrem einfach. Alles was wir brauchen ist ein Container mit zwei Bildern.

Fortschrittskontrolle

An diesem Punkt ist unser grundlegendes visuelles Styling abgeschlossen. Du solltest einen schönen kleinen Fotostapel haben, der ungefähr so ​​aussieht:

Schritt 5 Planen Sie die Animation

Nun, da wir die Fotos so eingerichtet haben, wie es uns gefällt, müssen wir die Einzelheiten darüber ausrechnen, wie wir sie bewegen sollen. Da es zwei Fotos gibt, müssen wir die einzelnen Bewegungen genau planen.

Bild eins

Das erste Bild beginnt am unteren Rand des Stapels. Der größte Teil der Bewegung findet auf dem anderen Foto statt, aber ich möchte, dass dieses so aussieht, als würde es sich aus dem Weg räumen und Platz für das andere machen, also drehen wir es ein wenig.

Lassen Sie uns jeden Schritt planen, ohne sich um die tatsächliche Syntax zu kümmern. Keyframes verwenden Prozentsätze, um die Animation darzustellen. Daher verwenden wir sie hier.

  • 0%: drehen (-7 Grad)
  • 50%: drehen (-14 Grad)
  • 100%: drehen (-7 Grad)

Wie Sie sehen, beginnen wir mit unserer Standardrotation von -7, wechseln dann zu einer Rotation von -14 und drehen uns schließlich zurück zu dem Punkt, an dem wir angefangen haben.

Bild zwei

Das zweite Foto ist viel komplizierter. Dieses Mal möchten wir das Foto beim Drehen ein paar hundert Pixel nach rechts verschieben, es an den unteren Rand des Stapels tauschen und es dann wieder dort einsetzen, wo es begonnen hat, während es auf dem Boden bleibt. So sieht das aus:

  • 0%: links 100px, z-index 1, drehen (7deg)
  • 49%: links 350px, z-index 1, drehen (20deg)
  • 50%: 350px links, Z-Index -3, drehen (20 Grad)
  • 100%: links 100px, Z-Index -3, drehen (7 Grad)

Beachten Sie, dass die Schritte bei 49% und 50% abgesehen vom z-Indexwert identisch sind. Wir möchten nicht, dass dieses Foto an den unteren Rand des Stapels springt, bis es dem anderen aus dem Weg ist. Wir müssen es also herausziehen, bevor es abspringt.

Kodieren Sie die Animation

Nun, da wir die Animation konzeptionell geplant haben, ist es an der Zeit, die CSS-Versionen zu erstellen. Die Progressionen, die wir gerade entwickelt haben, erweisen sich als ziemlich einfach. Denken Sie daran, dass dies nur die Animationen definiert, die wir später implementieren werden.

Präfix Mayhem

Der absolut schlimmste Teil bei der Verwendung von Keyframe-Animationen in CSS ist der Code-Code, den Sie verwenden müssen, um sie für alle möglichen Browser zu verwenden. Der Code, den wir gerade geschrieben haben, ist einfach genug, aber jetzt müssen wir ihn mit allen Präfixen wiederholen.

Es gibt tatsächlich eine wichtige Lektion hier, also ist dies eine gute Praxis. Der schwierige Teil ist, dass wir eine Eigenschaft eingebettet haben, die ein Präfix (Transformation) in eine andere (@keyframes) benötigt. Dies führt zu großen Kopfschmerzen. Und im großen und ganzen meine ich mehr als zweihundert Zeilen Code.

Dies führt zu großen Kopfschmerzen. Und im großen und ganzen meine ich mehr als zweihundert Zeilen Code.

Für das obige Snippet müssen wir alle Rotationen erweitern, damit sie alle vier Hauptpräfixe (Webkit, Moz, O und MS) haben. Dann müssen wir das Ganze wiederholen, während der @keyframe-Zeile auch die entsprechenden Präfixe hinzugefügt werden. Innerhalb jeder Zeile benötigen Sie jedoch nur die standardmäßige Rotateigenschaft zusammen mit dem Präfix, das mit dem Präfix des übergeordneten Keyframes übereinstimmt. Verwirrt noch? Ich auch.

Glücklicherweise ist Prefixr hier, um den Tag zu retten. Schnapp dir die Standardsyntax von oben und lass sie rein, dann werden alle verschiedenen Teile herauskommen, die du brauchst, um dies zu erreichen.

Willst du mich verarschen?

Mehr als 250 Codezeilen, um einfache Animationen zu definieren? Was rauche ich? Wenn wir dies mit CSS durchziehen wollen, brauchen wir dies, bis Keyframes zu einer Standardfunktion ohne Präfix werden.

Die Lektion hier ist, beim Hinzufügen von Komplexität zu Keyframe-Animationen vorsichtig zu sein, da dies schnell verrückt wird. Die zweite Lektion ist, dass jQuery immer noch die einfachste Lösung für das Erstellen einfacher Cross-Browser-Animationen ist.

Animationen aktivieren

Durch das Definieren von Keyframe-Animationen wird nichts geschehen. Wir müssen sie mit der "Animation" implementieren. Syntax. Dazu verwenden wir die Animationssyntax.

Wir möchten, dass dies geschieht, wenn wir über dem Container schweben, also verwenden wir es .container: schwebendifferenzieren Sie dann für jedes unserer Bilder nach der Klasse.

Hier haben wir die Animation mit den zuvor eingestellten Namen aufgerufen, die Länge auf eineinhalb Sekunden gesetzt, die Iteration auf zwei gesetzt und dann verwendet wechseln Die erste Iteration durchläuft dann die Reihenfolge der Reihe nach und die zweite durchläuft sie rückwärts, so dass wir am Anfang stehen.

Sieh es funktioniert!

Gute Nachrichten, wir sind alle fertig. Klicken Sie unten auf den Link, um den vollständigen Code sowie eine Live-Demo anzuzeigen.

Demo: Klicken Sie hier, um zu starten

CSS Keyframes: Noch nicht ganz da

Im Prinzip ist das Ablegen komplexer Animationen mit CSS überraschend einfach. Die Syntax ist unkompliziert, flexibel und leicht auffindbar.

Leider ist die Browser-Unterstützung immer noch zu kurz, wo wir sie haben möchten, und der für die Implementierung erforderliche Code kann geradezu verrückt werden, wenn Sie neben den Keyframes andere Prefix-CSS-Eigenschaften in den Mix integrieren.

Trotzdem war es eine tolle Zeit zu bauen, und wenn Sie es bis zum Ende schaffen, werden Sie zweifellos ein echter Profi in Sachen Keyframe-Syntax!