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.