Übergänge in CSS

Um Ihr Webdesign ansprechend zu machen, müssen Sie Ihren Inhalten bestimmte Animationen hinzufügen. Für den Umgang mit dem Verhalten dieser Animationen werden CSS -Übergänge verwendet. Übergänge werden in einer bestimmten Dauer als Verschiebung des Zustands eines Elements reibungslos bezeichnet. Bei der Anwendung von Übergangseffekten auf verschiedene CSS -Elemente müssen Sie daher die CSS -Eigenschaft angeben, auf die der Effekt angewendet wird, sowie die Zeit des Effekts. Das Angeben der Dauer ist sehr wichtig oder auf andere Weise wird es keinen Übergangseffekt auf das jeweilige Element geben.

Es gibt bestimmte CSS -Übergangseigenschaften, die zum Hinzufügen von Übergangseffekten auf verschiedene Elemente verwendet werden. Wir haben sie nachstehend im Detail erläutert.

CSS -Übergangseigenschaften

CSS liefert verschiedene Übergangseigenschaften, die wie folgt sind.

1. Übergangs-Property
2. Übergangszeit
3. Übergangsdelay
4. Übergangs-Timing-Funktion
5. Übergang

Alle oben genannten Eigenschaften werden nachstehend erläutert.

Übergangs-Property

Diese Eigenschaft wird verwendet, um verschiedene CSS -Eigenschaften anzugeben, auf die der Übergangseffekt angewendet werden sollte.

Syntax

Übergangs-Property: Keine | alle | Eigenschaft | Erben | Initial;

Der gesamte Wert ist ein Standardwert, der den Übergangseffekt auf alle angegebenen Eigenschaften anwendet, während der Eigenschaftswert den Eigenschaftsnamen angibt, auf den der Effekt angewendet wird.

Beispiel
Angenommen, Sie möchten die Breite und Höhe eines Div -Behälters mit der Übergangseigenschaft ändern.

Html

Bring Maus über mich

Wir definieren einfach einen DIV -Behälter.

CSS

div
Breite: 100px;
Höhe: 90px;
Hintergrund: Pink;
Übergangs-Property: Breite, Höhe;
Übergangsdauer: 2s;

Div: Hover
Breite: 250px;
Höhe: 250px;

Wir setzen die ursprüngliche Breite des Divs auf 100px und die Höhe auf 90px, dann wenden wir einen Übergangseffekt sowohl auf die Breite als auch auf die Höhe von Div für 2 Sekunden an. Das Angeben der Dauer ist ein Muss, sonst gilt der Übergang nicht nicht. Darüber hinaus tritt der Übergangseffekt auf, wenn der Benutzer die Maus auf den Div -Container bringt.

Ausgang

Ein Übergangseffekt wurde erfolgreich im Div -Container implementiert.

Übergangszeit

Diese Eigenschaft gibt an, wie lange der Übergangseffekt weiter erfolgen sollte. Jede Eigenschaft kann eine einzelne Dauer erhalten oder Sie können verschiedenen CSS -Eigenschaften unterschiedliche Dauer zuweisen.

Syntax

Zeitdauer: Zeit | Erben | Initial;

Der Zeitparameter gibt die Dauer des Übergangseffekts an.

Beispiel
Angenommen, Sie möchten die Schriftgröße und das Gewicht eines Absatzes erhöhen, wenn ein Mauszeiger darüber gebracht wird.

Html

Bring Maus über mich

Wir haben unseren Absatz definiert.

CSS

P
Schriftgröße: 20px;
Übergangs-Property: Schriftgröße;
Übergangsdauer: 3s;

P: Hover
Schriftgröße: 50px;

Der obige Code gibt an, dass die Schriftgröße des Absatzes, wenn der Mauszeiger über den Absatz gebracht wird, und dieser Effekt 3 Sekunden lang auftritt.

Ausgang

Die Eigenschaftseigenschaft funktioniert ordnungsgemäß.

Übergangsdelay

Diese Eigenschaft gibt die Verzögerung zwischen einer Änderung einer Eigenschaft und dem Beginn des Übergangseffekts an.

Syntax

Zeitdauer: Zeit | Erben | Initial;

Der Zeitparameter gibt die Wartedauer vor Beginn des Übergangseffekts an.

Beispiel
Nehmen wir an, Sie möchten nach einer Verzögerung von 2 Sekunden einen Übergangseffekt auf ein DIV -Element anwenden, folgen Sie dem folgenden Beispiel.

Html

Bring Maus über mich

Im obigen Code haben wir einfach einen DIV -Container erstellt.

CSS

div
Höhe: 100px;
Breite: 100px;
Hintergrundfarbe: Pink;
Übergangs-Property: Höhe;
Übergangsdauer: 3s;
Übergangsdelay: 2s;

Div: Hover
Höhe: 200px;

Nach dem obigen Code wird der Übergangseffekt nach der Verzögerung von 2 Sekunden auftreten.

Ausgang

Dies ist ein Übergangseffekt mit einer Verzögerung von 2 Sekunden.

Übergangs-Timing-Funktion

Diese Eigenschaft wird verwendet, um die Beschleunigungskurve des Übergangseffekts zu definieren.

Syntax

Übergangs-Timing-Funktion: Leichtigkeit | linear | Leichter | Leichtigkeit | Einleichterung in Out | Kubik-Bezier (N, N, N, N);

Alle Parameter werden unten erläutert.

• Leichtigkeit: Der Übergangseffekt erfolgt langsam und schläfrig.
• linear: Der Übergangseffekt hat von Anfang bis Ende die gleiche Geschwindigkeit.
• Leichterung: Der Übergangseffekt hat einen langsamen Anfang.
• Entlastung: Der Übergangseffekt wird ein langsames Ende haben.
• Einleichterung: Der Übergangseffekt hat einen langsamen Anfang sowie ein langsames Ende.
• Kubik-Bezier (N, N, N, N): Die Werte des Übergangseffekts werden auf Kubik-.

Beispiel
Betrachten Sie das folgende Beispiel unten.

Html

Bring Maus über mich

Ein Div -Behälter wurde einfach erstellt.

CSS

div
Höhe: 100px;
Breite: 100px;
Hintergrundfarbe: Pink;
Übergangs-Property: Breite;
Übergangsdauer: 2s;
Übergangs-Timing-Funktion: linear;

Div: Hover
Breite: 200px;

Gemäß dem obigen Code ändert sich die Breite des DIV -Containers linear, was bedeutet, dass der Übergangseffekt von Anfang bis Ende die gleiche Geschwindigkeit aufweist.

Ausgang

Der Übergangseffekt erfolgt linear.

Übergang

Diese Eigenschaft ist eine Abkürzungseigenschaft, mit der Werte auf alle oben genannten Übergangseigenschaften festgelegt werden.

Syntax

Übergang: (Eigenschaft) (Dauer) (Zeitfunktion) (Verzögerung);

Beispiel
Das folgende Beispiel zeigt die Arbeit der Übergangseigenschaft.

CSS

div
Höhe: 100px;
Breite: 100px;
Hintergrundfarbe: Leuchtding;
Übergang: Breite 0.5s linear 1s;

Div: Hover
Breite: 200px;

Mit der Übergangseigenschaft wenden wir einen Übergangseffekt auf die Breite für 0 an.5 Sekunden linear mit einer Verzögerung von 1 Sekunden.

Ausgang

Die Übergangseigenschaft funktioniert ordnungsgemäß.

Abschluss

Übergänge werden in einer bestimmten Dauer als Verschiebung des Zustands eines Elements reibungslos bezeichnet. CSS liefert verschiedene Übergangseigenschaften, die wie folgt sind: Übergangskopie, Übergangsdauer, Übergangsdelay, Übergangs-Timing-Funktion und Übergang. Alle diese Eigenschaften werden verwendet, um das Verhalten des Übergangseffekts auf verschiedene HTML -Elemente anzugeben. In diesem Leitfaden werden alle diese Eigenschaften mit Hilfe relevanter Beispiele erläutert.