Ich bin ein großer Fan von CSS-Übergängen. Sicher, sie können missbraucht werden, aber im Großen und Ganzen sind sie eine wirklich großartige und einfache Möglichkeit, Ihren Webseiten ein wenig Leben zu verleihen. Und seien wir ehrlich, es macht Spaß, mit ihnen zu spielen.
Ich habe Übergänge auf eine Million verschiedene Arten behandelt, aber es gibt eine Funktion, die ich kaum berühre: Übergangsverzögerungen. Warum möchten Sie Ihren Übergang verzögern? Es stellt sich heraus, dass die Effekte, die Sie erzielen können, viel komplexer und beeindruckender werden, wenn Sie diesen einen zusätzlichen Parameter verwenden. Lass uns rein springen und ein paar coole Demos bauen, um zu zeigen, wie es funktioniert.
Was wir bauen
Wenn Sie einen kurzen Blick auf das werfen möchten, was wir heute bauen, sehen Sie sich die drei folgenden Demos an:
- Sequenzielle Nachricht
- Ein Brief nach dem anderen
- Vorhang-Effekt
Die Syntax
Bevor wir mit dem Erstellen von Objekten beginnen, lohnt es sich, die CSS-Übergangssyntax aufzufrischen. Für Übergänge in CSS gibt es vier verschiedene Parameter: Eigenschaft, Dauer, Timing-Funktion und Verzögerung.
Sie können die Werte für jede dieser Eigenschaften mithilfe der folgenden Syntax einzeln festlegen. Denken Sie daran, dass Sie diesen Code über Prefixr ausführen möchten, um sicherzustellen, dass Sie die verschiedenen Browser behandelt haben.
Obwohl dies der einfachste Weg ist, einen Übergang zu erklären, ist es wirklich ein schrecklich sperriger Weg. Wenn wir alle verschiedenen erforderlichen Präfixe berücksichtigen, wird dieser Codeabschnitt enorm:
Wie Sie sehen, ist dies eine Menge Code für einen einfachen Übergang. Aus diesem Grund verwenden Codierer normalerweise die viel kürzere Abkürzungsversion. Mit dieser Methode können wir den riesigen Codeabschnitt oben verwenden und ihn in den folgenden, viel einfacher zu handhabenden Code-Ausschnitt konvertieren.
Die Kurzschrift-Syntax
Um sicher zu sein, dass wir uns alle auf derselben Seite befinden, finden Sie hier eine visuelle Aufgliederung der Übergangskurzschrift.
Wie Sie sehen, listet die traditionelle Methode die Eigenschaft auf, für die Sie den Übergang aktivieren möchten, gefolgt von der Dauer des Übergangs, der Beschleunigungsfunktion und schließlich der Verzögerung. Diese Syntax ist jedoch nicht sehr streng. Sie können beispielsweise die Position der Beschleunigungsfunktion vertauschen und die Verzögerung und der Übergang funktionieren weiterhin. Die obige Reihenfolge entspricht jedoch der offiziellen Spezifikation. Ich empfehle daher, sich daran zu halten.
Eine Sache, die ich jedoch häufig mache, ist einfach die Delay-Eigenschaft zu verlassen. Der Standardwert ist null Sekunden. Wenn Sie also keine Verzögerung wünschen, können Sie einfach Folgendes schreiben:
Die Macht der Übergangsverzögerungen
Nachdem wir nun die Syntax für Übergänge verstanden haben, wollen wir darüber sprechen, warum Sie in der Welt eine Verzögerung bei einem Übergang wünschen. Es gibt mehrere Gründe, aus denen Sie diese Eigenschaft verwenden möchten. Ich möchte mich jedoch heute auf komplexe Animationen mit mehreren Schritten konzentrieren. In den vorherigen Artikeln haben wir ein wenig mit mehreren Schrittübergängen gespielt, aber heute werden wir wirklich Spaß haben.
Grundsätzlich besteht das Konzept darin, dass Sie zwei oder mehr Übergänge für ein Ereignis auslösen, jedoch Verzögerungen verwenden, damit diese zu unterschiedlichen Zeitpunkten auftreten. Nehmen wir an, wir haben unseren ersten Übergang für eine Sekunde festgelegt. Dann können wir für den zweiten Übergang eine Verzögerung von einer Sekunde einstellen, damit der Übergang beginnt, sobald der erste endet. Die Ergebnisse können sehr beeindruckend sein!
Sequenzielle Nachricht
Die erste Idee, die mir bei der Verwendung von Verzögerungen in den Sinn kommt, ist das Einrichten einer Art Nachricht, die sich dem Benutzer Stück für Stück präsentiert. Nehmen wir an, wir möchten drei Textstellen haben, die zu unterschiedlichen Zeitpunkten in ein Div ein- und ausgeblendet werden. Der erste Schritt besteht darin, herauszufinden, wie alles funktioniert, so dass Sie Ihren Verstand damit einwickeln können.
- Standardnachricht:? Hier schweben?
- Eine Sekunde aus? Hover Here?
- Warten Sie eine Sekunde und fliegen Sie dann die zweite Nachricht ein: "Grüße!"
- Warten Sie zwei Sekunden und fliegen Sie dann die dritte Nachricht ein: Wie geht es Ihnen?
- Hover out kehrt zur Standardmeldung zurück
Wie Sie sehen, weisen wir den Benutzer zunächst an, über das Div zu fahren, und fliegen dann die Hover-Nachricht aus, während zwei weitere Nachrichten einfliegen, von denen die erste eine Sekunde und die zweite zwei Sekunden wartet.
HTML
Um dieses Demo zum Leben zu erwecken, benötigen wir ein div, das drei verschiedene Absätze enthält. Wenn Sie dies als Live-Projekt verwenden, möchten Sie natürlich eine Klasse oder ID anwenden, aber ich halte es hier einfach.
CSS
Um das CSS zu starten, formatieren wir das div und die Absätze. Hier sind einige wichtige Punkte zu beachten.Beachten Sie zunächst die relative Positionierung und den ausgeblendeten Überlauf des Div. Diese sind wichtig. Stellen Sie daher sicher, dass Sie sie einschließen.
Beachten Sie als Nächstes, dass ich die Textelemente absolut positioniert und aus den Grenzen des div herausgeschoben habe, sodass sie standardmäßig nicht sichtbar sind. Ich habe auch einen komplett optionalen, ausgefallenen Sass 3D-Effekt hinzugefügt. Den vollständigen Mix finden Sie in diesem Artikel.
Jetzt ist es an der Zeit, unseren ersten Absatz in Position zu bringen und unseren ersten Übergang zu schaffen. Um dies zu tun, verwenden wir den n-ten Child-Selector, um den ersten Absatz anzuvisieren ("Hover Here"). Platzieren Sie es fünfzig Pixel von oben, fügen Sie eine Verzögerung von einer Sekunde ohne Verzögerung hinzu und erstellen Sie einen Hover-Effekt, der ihn aus dem Blickfeld herauszoomt.
Um diese Demo abzuschließen, müssen wir ein Hover-Ereignis für den zweiten und dritten Absatz erstellen. Sie sind im Grunde die gleichen, nur stellen Sie sicher, dass die "Grüße"? Absatz hat eine Verzögerung von einer Sekunde und wie geht es dir? Absatz hat eine Verzögerung von zwei Sekunden. Stellen Sie außerdem sicher, dass der letzte Absatz weiter unten steht.
Live Demo
Das ist alles dazu! Schauen wir uns die Live-Demo auf Tinkerbin an. Hier können Sie den Code sehen und optimieren, sicher sein, dass Sie herumspielen und sehen, was Sie sich vorstellen können!
Demo: Klicken Sie hier, um zu starten. Beachten Sie, dass Sie den CSS-Modus in "Sass" ändern müssen. und drücken Sie? Run? um den 3D-Texteffekt zu sehen.
Ein Brief zu einer Zeit
In diesem Fall verwenden wir nur eine einzige Nachricht. Jeder Brief der Nachricht wird jedoch einzeln in Position gebracht. Das Ergebnis wird wirklich cool sein und sich sehr von dem unterscheiden, was Sie normalerweise mit CSS gemacht haben.
HTML
Leider bietet CSS keine gute Möglichkeit, einzelne Buchstaben in einer Zeichenfolge anzuvisieren (also noch nicht). Daher muss unser HTML-Code durch Spannweiten unübersichtlich werden. Es ist ein Schmerz und der Code sieht ein bisschen nachlässig aus, aber es ist das Beste, was wir tun können, ohne JavaScript in das Bild zu integrieren, was nicht in diesem Tutorial enthalten ist.
CSS
Unser erster CSS-Teil wird wie beim letzten Mal unser div einrichten und die Buchstaben formatieren. Ich verwende die Google-Webschriftart "Bree Serif". Ich habe auch die Deckkraft auf 0, die Position auf absolut gesetzt und den Text in Großbuchstaben umgewandelt.
Jetzt müssen wir auf jeden einzelnen Buchstaben einen anderen Übergang anwenden. Um dies zu erreichen, benutze n-child wie beim letzten Mal und ziele auf die Bereiche. Beachten Sie, dass der Hauptunterschied darin besteht, dass sich die Verzögerung jedes Mal verringert, beginnend bei 0,4 Sekunden bis hinunter auf 0.
Um diese einmal zu beenden, müssen wir zuerst erklären, was passiert, wenn wir über dem Div schweben. Ich habe die Spannweiten so eingestellt, dass sie eine Deckkraft von 1 haben, sie von links hineingebracht und um 360 Grad gedreht, sodass sie sich drehen.
Von hier aus bleibt nur noch übrig, jeden einzelnen Buchstaben beim Schweben in Position zu bringen. Nach Abschluss dieses Ereignisses werden bei einem einzigen Hover-Ereignis alle Buchstaben sichtbar und einrasten, und unsere Verzögerungen stellen sicher, dass dies alles nacheinander erfolgt.
Live Demo
Damit sind wir alle fertig. Schauen Sie sich die Demo unten an und bewegen Sie den Mauszeiger über das Div, um die Animation zu sehen und für Ihre eigenen Zwecke zu optimieren.
Demo: Klicken Sie hier, um zu starten.
Vorhang-Effekt
Inzwischen haben Sie den Überblick, wie alles funktioniert, also langweile ich Sie nicht mit weiteren Erklärungen, aber ich habe mir ein weiteres Demo ausgedacht, von dem ich dachte, dass es Spaß macht. Dieser verwendet einen Stapel von Bildern, die nach und nach wegfallen, um das endgültige Bild auf der Unterseite des Stapels sichtbar zu machen. Es ist ein gestaffelter Vorhang-Effekt, der definitiv mehr ist, als Sie bei einem einzigen CSS-Hover-Ereignis erwarten würden.
Demo: Klicken Sie hier, um zu starten.
Wie verwenden Sie Übergangsverzögerungen?
Nun, da Sie einige der Ideen sehen, die ich für die kreative Verwendung von Übergangsverzögerungen hatte, würde ich gerne sehen, was Sie sich vorgestellt haben. Hinterlassen Sie einen Link und zeigen Sie mir, was Sie haben!