CSS overgang flere egenskaper

“Overgang er definert når noen objekter endres fra en tilstand til en annen eller har noen animasjon. Når vi bruker overganger på et hvilket som helst element i CSS, vil det kontrollere animasjonshastigheten. Når vi ønsker å endre størrelsen på et objekt, og når vi ønsker å endre hastigheten på objektet etter å ha svevet over det, bruker vi overgangsegenskapen i CSS. Vi har forskjellige overgangsegenskaper i CSS. Vi kan sette bredde, høyde og animasjonstid i overgangseiendommen. Vi kan også sette forsinkelsestidspunktet i denne overgangsegenskapen. Med andre ord, det er bevegelsen av objektet når musen utløses over dette objektet. I denne opplæringen vil vi demonstrere begrepet overgangsegenskap i CSS. Vi vil bruke overgangsegenskapene her i denne opplæringen og vil forklare dem for deg.”

Eksempel 1
Start denne koden ved å opprette HTML -filen først. Vi åpner den nye filen og velger deretter HTML som språket i Visual Studio Code; Vi må legge “!”Inne i filen som vi har opprettet her. Alle de grunnleggende kodene i HTML vises i denne filen. Vi trenger bare å skrive inn kroppen til HTML og lenken til CSS -filen inne i “hodet.”Her, i kroppen, lager vi først en overskrift og deretter et avsnitt. Etter dette avsnittet lager vi en tom div her. Vi vil også bruke denne HTML -koden i våre neste eksempler. Nå skal vi bevege oss mot CSS -filen for videre koding. Vi vil bruke overgangsegenskapene på denne DIV i CSS -filen.

Først setter vi "div" og "bredden" er "100px" og "100px" for "høyden.”Sett deretter sin“ bakgrunn ”som“ lilla."" Border-radius "av denne diven er" 50%", så det vil vises som en sirkel. Etter alle disse egenskapene skal vi bruke "overgang" -egenskapen og sette "bredde" og "2s" her. Det bruker overgangseffekten på divens bredde og animerer for 2sek. Etter dette bruker vi "svevet" med "div", så når vi svever over denne diven, vil den endre bredden til "300px" som vi har valgt "300px" som "bredde.”

Utgangen til denne koden viser hvordan overgangsegenskapen endres i bredden på DIV -elementet. Du kan se i denne gitte videoen at bredden øker når vi svever musen over denne DIV -sirkelen. Når musen ikke er over dette elementet, vil den komme tilbake til den opprinnelige posisjonen.

Videospillerhttps: // linuxhint.COM/WP-Content/Uploads/2022/06/Transition-Property-Profile-1-Microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Bruk opp/ned piltastene for å øke eller redusere volumet.

Eksempel nr. 2
Her skal vi bruke overgangsegenskapen på både bredde og høyde. "Bredden" på Div er "120px", og "høyden" er også den samme "120px". "Bakgrunnen" av Div er i "oransje" farge, og dens "grensradius" er "30%" i dette eksemplet. Vi bruker "overgang" -egenskapen her, som endrer dens "bredde" med en tidsvarighet på "2s" og endrer den. Alle disse overgangene blir brukt når vi utløser musen over dette divelementet. Vi bruker også “Div.Hover, "der vi setter" bredden "og" høyden "på Div -elementet etter å ha svevet. Vi setter "320px" for "bredden" når vi svever over den og
“Høyde” på 320px ”.

I denne gitte videoen kan du se utdataene fra dette eksemplet. Du kan se at når vi svever på dette DIV -elementet, endrer det bredden så vel som høyden fordi vi setter både bredde og høyde i CSS -overgangsegenskapen.

Videospillerhttps: // linuxhint.COM/WP-Content/Uploads/2022/06/Transition-Property-Profile-1-Microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Bruk opp/ned piltastene for å øke eller redusere volumet.

Eksempel nr. 3
Her skal vi bruke alle overgangsegenskapene separat på Div. Vi setter "bredden" og "høyden" først, og begge er i "130px". Så velger vi "rosa" som "bakgrunnen" for Div. Dens "grensradius" er "20%". Nå har vi overgangsegenskapene her. Først setter vi "overgangs-egenskapen" og gir navnet overgangen brukes. Så her setter vi "bredden" i denne egenskapen. Vi kommer til å sette tiden i separate overgangsegenskaper. For å sette overgangstidspunktet, bruker vi egenskapen "overgangsvarme" og gir tiden her i denne eiendommen. Vi satte “2s” for denne “tidsvarig eiendom.”

Etter dette har vi eiendommen "overgangs-timing-funksjon". Denne egenskapen brukes her for å spesifisere hastigheten på overgangen. Her setter vi det som "lineær", noe som betyr at overgangseffekthastigheten vil være den samme fra start til slutt. Deretter bruker vi også en viss forsinkelse på denne overgangen ved å bruke egenskapen "overgang-forsinkelse". Vi setter denne eiendomsverdien som "1s". Det vil gi en forsinkelse av “1sec” for overgangseffekten. Vi bruker alle overgangsegenskapene her i denne koden hver for seg. Etter alle disse setter vi "bredden" på div når vi svever på den. Etter å ha svevet endrer den bredden til “350px”.

Utgangen vises her i videoen. Du kan se at når vi svever musen over denne diven, tar den en 1SEC -forsinkelse og deretter bruker overgangen på bredden, og bredden endres på en lineær måte, noe som betyr med en konstant hastighet fra start til slutt.

Videospillerhttps: // linuxhint.COM/WP-Content/Uploads/2022/06/Transition-Property-Profile-1-Microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Bruk opp/ned piltastene for å øke eller redusere volumet.

Eksempel 4
I dette eksemplet bruker vi Shorthand -egenskapen til alle egenskapene som vi har brukt i vårt forrige eksempel 3 i denne opplæringen. "Bredde" og "høyde" er satt her som "150px" for hver, og "bakgrunnen" er "rosa.”Deretter bruker vi korthåndsegenskapen til overgangen der vi spesifiserer“ overgangseiendom ”,“ overgangs-varighet ”,“ overgangs-timing-funksjon og “overgangs-forsinkelse” i en "overgang" -egenskap. Her spesifiserer "bredden" at overgangen brukes på "bredden" på div, og overgangens varighet er "2s" og i "lineær" timingfunksjon for overgangen og en forsinkelse på 1 sek i overgangen. Alle disse egenskapene er definert her i en eiendom. Så det kalles også overgangen til korthet. Vi setter også "bredden" på denne diven etter å ha svevet over musen.

Utgangsvideoen viser at når vi flytter musen over dette, tar den en 1 sekunders forsinkelse før du bruker overgangen på bredden, som endres lineært fra start til slutt.

Videospillerhttps: // linuxhint.COM/WP-Content/Uploads/2022/06/Transition-Property-Profile-1-Microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Bruk opp/ned piltastene for å øke eller redusere volumet.

Eksempel 5
Vi lager flere divelementer her med forskjellige navn og vil bruke forskjellige overgangs-timing-funksjonsegenskaper på alle disse. Vi oppretter fem forskjellige divelementer her i denne koden.

"Bredden" og "høyden" på alle divelementer er "100px" for hver. Vi bruker "overgangen" på "bredden" i tidsvarigheten til "2s". Vi justerer også teksten som er skrevet inne i Div i "Center" ved å bruke egenskapen "tekst-align" og sette "fet" for denne "fontvekt.”Deretter skal vi nevne den første diven ved hjelp av Div-navnet og bruke egenskapen" overgangstiming-funksjon "for denne diven, og sette" lineær "for denne diven. Så det viser samme hastighet fra start til slutt. "Bakgrunnen" til "div1" er "rød.”

For den andre diven, “Div2”, bruker vi “Ease” for “overgangs-timing-funksjonen.”Denne“ lettheten ”vil starte overgangen sakte, deretter raskt og avsluttes sakte. "Bakgrunnen" til "div2" er "grønn.”For Third Div,“ Div3 ”, bruker vi en" blå "bakgrunn, og vi setter" Ease-In "som verdien av" overgangs-timing-funksjonen.”" Lettheten "brukes til å få overgangseffekten til å starte sakte. Den fjerde diven har en "gul" "bakgrunn" og "letthet" for denne eiendommen. Den "lette" overgangen avsluttes sakte. The Last Div bruker “Ease-In-Out” i “Overgangstiming-funksjon” og vil starte og avslutte sakte. Også "bakgrunnen" til den siste diven er "maroon.”

I videoen har vi fem forskjellige divelementer med forskjellige “overgangstiming-funksjon”, og du kan legge merke til i denne videoen at tidspunktet for overgangen til alle divelementer er annerledes.

Videospillerhttps: // linuxhint.COM/WP-Content/Uploads/2022/06/Transition-Property-Profile-1-Microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Bruk opp/ned piltastene for å øke eller redusere volumet.

Konklusjon

Vi har gitt denne opplæringen som forklarer konseptet med overgangsegenskapene i CSS. Vi har dekket dette emnet i detalj i denne opplæringen. Vi har forklart overgangseiendommen, overgangsvarsling, overgangs-timing-funksjon og overgangs-forsinkelsesegenskaper hver for seg og Shorthand-egenskapen til disse egenskapene her. Vi har gått over fem forskjellige eksempler og gitt videoutgangene slik at du sjekker hvordan denne egenskapen fungerer. Jeg håper du forstår flere overgangsegenskaper i CSS og vil gjøre det selv.