So verwenden Sie die CSS3-Übergangseigenschaft

Mit der Einführung von CSS3 stehen viele neue Funktionen zur Verfügung, mit denen Sie großartige Effekte erstellen können. Eines der nützlichsten ist das Übergang Eigentum.

Die Transition-Eigenschaft ist eine wichtige Neuentwicklung in CSS. Es kann verwendet werden, um mithilfe einer einfachen Struktur einen dynamischen Änderungseffekt auf ein Div oder eine Klasse zu erzeugen:

Übergang: Eigenschaftsdauer Timing-Funktionsverzögerung;

Der Übergang von CSS3 ist eine großartige Möglichkeit, Websites ein wenig Animation hinzuzufügen, ohne den großen Aufwand einer JavaScript-Bibliothek wie jQuery.

Demo

Bevor wir beginnen, können Sie sich hier eine Demo ansehen die Übergangseigenschaft in Aktion.

Eigentum

Damit die Übergangseigenschaft funktioniert, muss zunächst die Standardeigenschaft definiert werden, auf die sie angewendet wird. Die beiden wohl häufigsten Eigenschaften, die definiert werden, sind: Breite Und Höhe. Um die Eigenschaft eigenständig zu schreiben, verwenden Sie einfach:

Übergangseigenschaft: Eigenschaft definieren

Größenänderung

Anschließend müssen nach der Definition der Eigenschaft die Start- und Endwerte zugewiesen werden. Bei Werten wie Breite oder Höhe muss die Eigenschaft mit einem Startwert und dann mit einer anderen Bedingung mit einem Endwert festgelegt werden.

Hier setzen wir beispielsweise die Eigenschaft „Übergang“ auf „Breite“, dann den Startwert „Breite“ und dann den Endwert, wenn der Mauszeiger über das Element bewegt wird:

#mainheader {
Übergangseigenschaft:width;
Breite:50px;
}
#mainheader:hover {
Breite:75px;
}

Dauer

Nachdem wir nun die zu transformierende Eigenschaft sowie die Start- und Endwerte definiert haben, müssen wir die Dauer des Übergangs definieren. Dies wird erreicht, indem wie folgt eine Länge in Sekunden oder Millisekunden definiert wird:

Übergangszeit: Dauer;

Wenn man dies in das Beispiel einbaut, wird der folgende Code erstellt:

Lesen:  5 Gründe, den professionellen Service für Ihre Klimaanlage anzurufen

#mainheader {
Übergangseigenschaft:width;
Übergangsdauer: 0,5 s;
Breite:500px;
}
#mainheader:hover {
Breite:750px;
}

Dies bedeutet, dass das Hauptheader-Div über eine Dauer von 5 Sekunden um 25 Pixel erweitert wird.

Timing-Funktion

Der Code reicht aus, um einen schönen Effekt zu erzeugen, wir können jedoch die CSS3-Übergangseigenschaft weiter nutzen, indem wir verwenden Timing-Funktion Mit dieser Eigenschaft ist es möglich, den Geschwindigkeitsverlauf der Übergangsdauer zu verändern. Die Übergangseigenschaft ist standardmäßig auf eine lineare Kurve eingestellt. Sie können jedoch „Ease“, „Ease-in“, „Ease-out“, „Ease-in-out“ und sogar „Cubic-Bézier“ definieren, um die Geschwindigkeitskurve zu ändern. Mit der Kubikbezier-Methode können Sie Ihre eigenen Werte mithilfe von (n,n,n,n) definieren, wobei n zwischen 0 und 1 liegen kann (linear wäre beispielsweise (0,0,1,1)).

Das Hinzufügen dieses Codes zu unserem Beispiel führt zu:

#mainheader {
Übergangseigenschaft:width;
Übergangszeitfunktion:ease-in-out;
Übergangsdauer: 0,5 s;
Breite:500px;
}
#mainheader:hover {
Breite:750px;
}

Verzögerung

Darüber hinaus definiert die Verwendung der Eigenschaft „transition-delay“, ähnlich wie bei „transition-duration“, eine Pause, bevor der Übergangseffekt beginnt:

Übergangsverzögerung: Zeit;

Abschluss

Abschließend ist es wichtig, bei der Verwendung der CSS3-Übergangseigenschaft zwei Dinge zu berücksichtigen. Erstens benötigen die meisten derzeit im Umlauf befindlichen Browser ein Browser-Präfix, um es zu verwenden (mit Ausnahme von IE10, Opera und Firefox16+):

-moz-transition: für Firefox 15
-webkit-transition: für Chrome und Safari

(Beachten Sie, dass IE9 und niedriger die Übergangseigenschaft überhaupt nicht unterstützen.)

Zweitens: Auch wenn ich in den obigen Beispielen der Klarheit halber die lange Schrift verwendet habe, gilt es als bewährte Methode, in Kurzform zu schreiben, wie folgt:

#mainheader {
-moz-transition: width easy-in-out 0,5 s 0,1 s; /* für Firefox 15 */
-webkit-transition: Breite Easy-In-Out 0,5 s 0,1 s; /* für Chrome und Safari */
Übergang: Breite Easy-In-Out 0,5 s 0,1 s;
Breite:500px;
}
#mainheader:hover {
Breite:750px;
}

Lesen:  20 gängige SSH-Befehle, die Sie heute verwenden sollten

Verwenden Sie die Übergangseigenschaft von CSS3? Wie ist der Vergleich mit jQuery-basierten Tweens? Lass es uns in den Kommentaren wissen.

Ausgewähltes Bild/Miniaturansicht, Bewegtbild über Shutterstock.

Aktuelle Artikel:

Empfohlen