Eine der Innovationen von CSS3 ist die Fähigkeit, Übergänge und Animationen mit Verhaltensweisen zu erstellen. CSS3 -Animation kann in zahlreichen Schlüsselrahmen verwendet werden, um das Aussehen und das Verhalten eines Elements zu ändern. Eine Animation legt viele Übergangspunkte auf, die auf verschiedenen Keyframes basieren, während Übergänge es Ihnen ermöglichen, von einem Zustand in einen anderen zu wechseln.

In diesem Artikel werden wir untersuchen:

• Übergangs-Property in CSS
• So verwenden Sie die Übergangs-Property in CSS?

Also gut, lass uns anfangen!

Was ist eine Übergangs-Property in CSS??

Der "Übergangs-Property”Ermöglicht es uns, die Werte der Eigenschaft reibungslos gemäß der angegebenen Dauer zu ändern. Es tritt auf, wenn die CSS -Eigenschaft ihren Wert von einem zum anderen ändert, ohne zu blinken. Abhängig von seinem Zustand kann es schwebend oder aktiv werden. Lassen Sie uns nun zur Syntax der Übergangs-Property wechseln.

Syntax

Es gibt zwei Dinge, die Sie beim Erstellen eines Übergangseffekts angeben müssen:

• Hinzufügen eines Effekts zu einer CSS -Eigenschaft.
• Setzen Sie die Dauer des Effekts.

Befolgen Sie die folgende Syntax, um einen Übergangseffekt unter Verwendung der Übergangs-Property hinzuzufügen:

Übergangs-Property: Wert;

Fügen Sie am Wertstätter einen Übergang aus, den Sie anwenden möchten.

Befolgen Sie die untergezogene Syntax, um den Dauereffekt unter Verwendung der Übergangsdauer-Eigenschaft hinzuzufügen:

Übergangsdauer: Wert;

Abhängig von Ihren Vorlieben können Sie auch eine Übergangsverzögerung und eine Zeitfunktion hinzufügen.

Hier ist ein Beispiel, in dem wir den Slide-In-Übergang implementieren.

So verwenden Sie die Übergangs-Property in CSS?

Wir können benutzen "Übergangs-Property”Auf jedem Element wie Div, Überschrift, Knopf und vielen anderen.

Lassen Sie uns unter Verwendung eines Beispiels sehen, wie die Übergangseigenschaft funktioniert.

Beispiel: Wie man vom linken Übergang in CSS einweist?

Im folgenden Beispiel werden wir eine Überschrift erstellen

Innerhalb der:

Sieben Sie sich vom linken Übergang ein

Wenn wir diese HTML -Datei ausführen, wird das folgende Ergebnis angezeigt:

Hier können wir sehen, dass eine einfache Überschrift präsentiert wird. Jetzt wechseln wir zum CSS -Abschnitt, wo die Übergangseigenschaft auf den erstellten Container angewendet werden soll. Zu diesem Zweck schreiben wir den folgenden Code:

div
Breite: 150px;
Höhe: 150px;
Hintergrund: Goldenrod;
Übergangs-Property: Breite;
Übergangsdauer: 1s;

Der obige Codeblock dient den folgenden Funktionen:

Breite und Höhe: Die Größe von Div ist “150px"In Breite und"150px" in der Höhe.

Hintergrund: Die Farbe des DIV ist auf “eingestellt“Goldenrod”.

Übergangs-Property: Wir haben die Übergangseigenschaft auf Breite eingestellt. Dadurch gleitet es im Übergang von links.

Übergangszeit: “1sOder eine Sekunde ist die Übergangsdauer. Wenn wir den Cursor innerhalb einer Sekunde aus der DIV herausziehen, wird er in seinen ursprünglichen Zustand gehen.

Notiz: Wenn sich die Eigenschaft der CSS -Breite ändert, beginnt der Übergangseffekt.

Nehmen Sie nun einen neuen Wert für die Breite Eigenschaft, mit der Sie über das Divelelement maust. Die Größe der Breite Eigenschaft ist auf “500px”. Es gleitet von links nach rechts, wenn ein Cursor auf das Element bewegt, und wenn Sie die Maus aus dem Element herausziehen, kehrt der Stil nach und nach in seinen ursprünglichen Zustand zurück:

Div: Hover
Breite: 500px;

Gehen Sie danach zur HTML -Datei und führen Sie sie aus. Es wird die folgende Ausgabe geben:

Nachdem wir die Übergangseigenschaft auf die DIV angewendet haben, können wir jetzt sehen, dass sie aktiv ist.

Abschluss

In CSS, zum Einschieben vom linken Übergang, das “Übergangs-Property" wird eingesetzt. Sie können die Wirkung des Übergangs und der Dauer mit der “festlegen“Übergangs-Property" Und "ÜbergangszeitEigenschaften. Mit Hilfe eines Beispiels hat dieser Artikel gezeigt, wie die Übergangseigenschaft zum Gleiten von links nach rechts verwendet wird.