Hvordan sette overgangshøyde i CSS

I webapplikasjoner er det nødvendig å formidle meldingen effektivt. Utviklere leverer konseptene sine til seerne sine på en bedre måte ved å bruke animasjoner. For å sette opp forskjellige egenskaper ved animasjonen, for eksempel tilstander og hastighet, brukes overganger. I CSS hjelper overganger med å anvende forskjellige effekter over HTML -elementer som varighet og forsinkelse.

Hvordan sette overgangshøyde i CSS?

I CSS kan overgangshøyde settes ved hjelp av følgende egenskaper:

• Overgangseiendom
• transformere med overgangseiendommer

Så la oss komme i gang med metode en!

Metode 1: Angi overgangshøyden ved hjelp av CSS -overgangsegenskaper

En "overgang”Er et tidsramme satt ved å spesifisere et elements første og endelige tilstand. Det er korthåndsegenskapen til alle overgangsegenskaper for langhånd.

La oss gå videre og ta et eksempel for å forstå hvordan overgangsegenskapen kan brukes til å stille overgangshøyden.

Eksempel 1

Innenfor HTML -filen, spesifiser "”Mellom tagger.

Html

Først vil vi spesifisere "bakgrunnsfarge”Eiendom med verdi”oransje”. Tilordne deretter høyden og breddeegenskapene med verdier “100px”Og“50px”. Nå, sett "overgang”Eiendom med“Høyde 1s”Verdi; Høyde 1 -er spesifiserer elementet vil utføre den tildelte handlingen på ett sekund i vertikal retning.

I neste trinn vil vi bruke velgeren “:sveve”Med Element Div og sette høydeegenskapen som“200px”. Dette vil få den vertikale linjen til å utvide seg fra 100px til 200px når vi holder pekeren på elementet.

CSS

div
bakgrunnsfarge: oransje;
Høyde: 100px;
Bredde: 50px;
Overgang: høyde 1s;

Div: Hopp
Høyde: 200px;

La oss lagre den nevnte koden og kjøre den i nettleseren:

Som du kan se i output ovenfor, er overgangshøyden blitt satt vellykket.

Metode 2: Angi overgangshøyden ved hjelp av CSS Transform Property

2D- eller 3D -variasjonene som kan implementeres på HTML -elementer, skyldes “forvandle”Eiendom. Du kan utføre forskjellige handlinger ved å bruke denne egenskapen, for eksempel skala, skjev, oversette og rotere. Hvis du ikke er klar over disse nevnte operasjonene, kan du sjekke ut denne dedikerte artikkelen.

Eksempel

Vi vil sette verdien av "forvandle”Eiendom som“Scaley (1)”; Her brukes Scaley til å justere et element vertikalt, og passere “1”Ettersom argumentet vil øke høyden. Vi vil sette "Transform-origin”Eiendom med verdien”topp”, Som indikerer at transformasjonen vil bli brukt fra det øvre punktet. Nå vil vi gi overgangseiendommen en verdi “Transform 1s, 1s”, Hvor de første 1 -ene er for bredde, og den andre er for høyden; Dette vil spesifisere transformasjonen av ett sekund over det valgte elementet.

Bruk: Hover -velgeren og tilordne transformasjonseiendommen en verdi “Scaley (1.1)”. Som et resultat, når pekeren er plassert på elementet, vil størrelsen øke henholdsvis.

CSS

div
bakgrunnsfarge: oransje;
Høyde: 100px;
Bredde: 50px;
Transform: Scaley (1);
Transform-origin: topp;
Overgang: Transform 1s, 1s;

Div: Hopp
Høyde: 200px;
Transform: Scaley (1.1);

Produksjon

Vi har dekket hvordan du setter overgangshøyde i CSS.

Konklusjon

For å stille overgangshøyden, “overgang”Eiendom kan brukes. Det tar sekundverdien som et argument for å utføre en spesifikk handling i en viss tid. Dessuten CSS “forvandleEiendom sammen med overgang kan også brukes der du må spesifisere transformeskalaen og opprinnelsen for å oppnå de ønskede resultatene. Denne guiden demonstrerer alle effektive metoder for å angi overgangshøyde i CSS.