Zusammen mit der Einführung von CSS3 gibt es viele neue Funktionen, die für die Erstellung großer Effekte zur Verfügung stehen. eine der nützlichsten ist die Übergangseigenschaft .
Die Übergangseigenschaft ist eine wichtige Neuentwicklung in CSS. Es kann verwendet werden, um einen dynamischen Änderungseffekt für ein div oder eine Klasse mithilfe einer einfachen Struktur zu erstellen:
transition: property duration timing-function delay;Der CSS3-Übergang ist eine großartige Möglichkeit, Websites eine kleine Animation hinzuzufügen, ohne den großen Overhead einer JavaScript-Bibliothek wie jQuery.
Bevor wir anfangen, können Sie hier eine Demo sehen die Übergangseigenschaft in Aktion .
Damit die Übergangseigenschaft funktioniert, muss zunächst die Standardeigenschaft definiert werden, auf die sie angewendet wird. Wahrscheinlich sind die zwei häufigsten Eigenschaften, die definiert werden, Breite und Höhe. Um die Eigenschaft standalone zu schreiben, benutzen Sie einfach:
transition-property: define propertyNachdem die Eigenschaft definiert wurde, müssen die Anfangs- und Endwerte zugewiesen werden. Bei Werten wie Breite oder Höhe muss die Eigenschaft mit einem Startwert und dann einem Endwert mit einer anderen Bedingung festgelegt werden.
Zum Beispiel setzen wir hier die Übergangseigenschaft auf width, dann den Startwert von width und setzen dann den Endwert, wenn das Element über den Mauszeiger gezogen wird:
#mainheader {transition-property:width;width:50px;}#mainheader:hover {width:75px;}Nachdem wir nun die zu transformierende Eigenschaft definiert haben, die Start- und Endwerte, müssen wir die Dauer des Übergangs definieren. Dies wird erreicht, indem eine Länge in Sekunden oder Millisekunden wie folgt definiert wird:
transition-duration: duration;Im folgenden Beispiel wird der folgende Code erstellt:
#mainheader {transition-property:width;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Dies bedeutet, dass sich der Hauptleiter div um 25 Pixel über eine Dauer von 5 Sekunden ausdehnt.
Der Code ist ausreichend, um einen schönen Effekt zu erzeugen, aber wir können die CSS3-Übergangseigenschaft weiter nutzen, indem wir die Timing-Funktion verwenden. Mit dieser Eigenschaft ist es möglich, die Geschwindigkeitskurve der Übergangsdauer zu ändern. Die Übergangseigenschaft ist standardmäßig auf eine lineare Kurve eingestellt. Sie können jedoch die Geschwindigkeitskurve mit Leichtigkeit, Leichtigkeit, Leichtigkeit und sogar kubisch-Bezier definieren. Cubic-Bezier erlaubt Ihnen, Ihre eigenen Werte mit (n, n, n, n) zu definieren, wobei n zwischen 0 und 1 liegen kann (zum Beispiel wäre linear (0,0,1,1)).
Fügen Sie diesen Code zu unserem Beispiel hinzu:
#mainheader {transition-property:width;transition-timing-function:ease-in-out;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Ähnlich wie die Übergangsdauer definiert die Verwendung der Übergangsverzögerungseigenschaft eine Pause, bevor der Übergangseffekt beginnt:
transition-delay: time;Schließlich ist es wichtig, zwei Dinge zu beachten, wenn Sie die Übergangseigenschaft CSS3 verwenden. Erstens benötigen die meisten gegenwärtig im Umlauf befindlichen Browser ein Browser-Präfix, um es zu benutzen (die Ausnahmen sind IE10, Opera und Firefox16 +):
-moz-Übergang: für Firefox 15
-webkit-Übergang: für Chrome und Safari
(Beachten Sie, dass IE9 und niedriger die Übergangseigenschaft überhaupt nicht unterstützt.)
Zweitens, obwohl ich in den obigen Beispielen aus Gründen der Klarheit lange verwendet habe, gilt es als beste Vorgehensweise, in Kurzform wie folgt zu schreiben:
#mainheader {-moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */-webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */transition: width ease-in-out 0.5s 0.1s;width:500px;}#mainheader:hover {width:750px;}Verwenden Sie die Übergangseigenschaft von CSS3? Wie verhält es sich mit jQuery-basierten Tweens? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Bewegungsbild über Shutterstock.