So setzen Sie die Übergangshöhe in CSS

In Webanwendungen ist es erforderlich, die Nachricht effizient zu vermitteln. Entwickler liefern ihren Zuschauern ihre Konzepte besser mit Animationen an ihre Zuschauer. Um verschiedene Eigenschaften der Animation einzurichten, z. B. Zustände und Geschwindigkeit, werden Übergänge verwendet. In CSS helfen Übergänge bei der Anwendung verschiedener Effekte auf HTML -Elemente wie Dauer und Verzögerung.

So setzen Sie die Übergangshöhe in CSS?

In CSS kann die Übergangshöhe unter Verwendung der folgenden Eigenschaften festgelegt werden:

• Übergangseigenschaft
• mit Übergangseigenschaft transformieren

Beginnen wir also mit Method One!

Methode 1: Stellen Sie die Übergangshöhe mithilfe der CSS -Übergangseigenschaft ein

A "ÜbergangIst ein Zeitrahmen, der durch Angabe des anfänglichen und endgültigen Zustands eines Elements festgelegt wird. Es ist das Kurzeigeneignis aller Longhand-Übergangseigenschaften, wie z.

Lassen Sie uns vorwärts gehen und ein Beispiel geben, um zu verstehen, wie die Übergangseigenschaft verwendet werden kann, um die Übergangshöhe festzulegen.

Beispiel 1

Geben Sie in der HTML -Datei die “an“ an “”Zwischen Tags.

Html

Erstens werden wir das angeben “Hintergrundfarbe”Eigenschaft mit Wert“orange”. Weisen Sie dann die Eigenschaften der Höhe und der Breite mit Werten zu “100px" Und "50px”. Stellen Sie jetzt die "fest"ÜbergangEigentum mit dem "Höhe 1s" Wert; Höhe 1s gibt an, dass das Element die zugewiesene Aktion in einer Sekunde in vertikaler Richtung ausführt.

Im nächsten Schritt werden wir den Selektor verwenden. “:schweben"Mit Element Div und setzen Sie die Höhe der Höhe als"200px”. Dadurch wird die vertikale Linie von 100px auf 200px erweitert, wenn wir unseren Zeiger auf das Element schweben.

CSS

div
Hintergrundfarbe: Orange;
Höhe: 100px;
Breite: 50px;
Übergang: Höhe 1s;

Div: Hover
Höhe: 200px;

Sparen wir den genannten Code und führen Sie ihn im Browser aus:

Wie Sie im obigen Ausgang sehen können, wurde die Übergangshöhe erfolgreich eingestellt.

Methode 2: Stellen Sie die Übergangshöhe mithilfe der CSS -Transformationseigenschaft ein

Die 2D- oder 3D -Variationen, die auf HTML -Elementen implementiert werden können, ergeben sich aus dem “verwandeln" Eigentum. Sie können unterschiedliche Aktionen unter Verwendung dieser Eigenschaft ausführen, z. Wenn Sie sich dieser genannten Operationen nicht bewusst sind, lesen Sie diesen speziellen Artikel.

Beispiel

Wir werden den Wert der "festlegen"verwandelnEigentum als "skaliert (1)”; Hier wird der skalierte Wege verwendet, um ein Element vertikal anzupassen und zu bestehen. “1”Wenn sein Argument die Größe erhöhen wird. Wir werden die "festlegen"Transform-Origin”Eigenschaft mit dem Wert“Spitze”, Was angibt, dass die Transformation vom oberen Punkt aus angewendet wird. Jetzt werden wir der Übergangseigenschaft einen Wert geben “Transformation 1s, 1s”, Wo die ersten 1s für die Breite sind und der andere für die Höhe; Dadurch wird die Ein Sekunde Transformation über das ausgewählte Element angegeben.

Verwenden Sie den: Hover -Selektor und weisen Sie die Transformationseigenschaft einen Wert zu “zu“skaliert (1.1)”. Wenn der Zeiger auf das Element platziert wird, erhöht sich seine Größe jeweils.

CSS

div
Hintergrundfarbe: Orange;
Höhe: 100px;
Breite: 50px;
Transformation: Skalyy (1);
Transform-Origin: Top;
Übergang: Transformation 1s, 1s;

Div: Hover
Höhe: 200px;
Transformation: Skalyy (1.1);

Ausgang

Wir haben bedeckt, wie man die Übergangshöhe in CSS festlegt.

Abschluss

Um die Übergangshöhe festzulegen, die “ÜbergangEigenschaft kann verwendet werden. Es dauert den Sekundenwert als Argument, um eine bestimmte Aktion für eine bestimmte Zeit auszuführen. Darüber hinaus CSS “verwandelnDie Eigenschaft zusammen mit dem Übergang kann auch verwendet werden, in dem Sie die Transformationsskala und den Ursprung angeben müssen, um die gewünschten Ergebnisse zu erzielen. Dieser Leitfaden zeigt alle effizienten Methoden, um die Übergangshöhe in CSS festzulegen.