Overganger i CSS

For å gjøre webdesignet ditt tiltalende må du legge til visse animasjoner i innholdet ditt. For å håndtere oppførselen til disse animasjonene brukes CSS -overganger. Overganger blir referert til som et skifte i tilstanden til et element jevnt i en spesifikk varighet. Derfor, når du bruker overgangseffekter på forskjellige CSS -elementer, må du oppgi CSS -egenskapen som effekten vil bli brukt på, så vel som tiden for effekten. Å spesifisere varigheten er svært viktig eller på annen måte, det vil ikke være noen overgangseffekt på det aktuelle elementet.

Det er visse CSS -overgangsegenskaper som brukes til å legge til overgangseffekter på forskjellige elementer, vi forklarte dem i detalj nedenfor.

CSS -overgangsegenskaper

CSS gir forskjellige overgangsegenskaper som er som følger.

1. Overgangseiendom
2. Overgangs-varighet
3. Overgang-forsinkelse
4. Overgangstiming-funksjon
5. overgang

Alle de ovennevnte egenskapene er forklart nedenfor.

Overgangseiendom

Denne egenskapen brukes til å spesifisere forskjellige CSS -egenskaper som overgangseffekten skal brukes.

Syntaks

Overgangseiendom: Ingen | alle | eiendom | arve | første;

All verdi er en standardverdi som bruker overgangseffekten på alle spesifiserte egenskaper, mens eiendomsverdien spesifiserer eiendomsnavnet som effekten vil bli brukt.

Eksempel
Anta at du vil endre bredden og høyden på en DIV -beholder ved hjelp av overgangsegenskapen.

Html

Ta med mus over meg

Vi definerer ganske enkelt en div container.

CSS

div
Bredde: 100px;
Høyde: 90px;
Bakgrunn: rosa;
Overgangseiendom: Bredde, høyde;
Overgangs-varighet: 2s;

Div: Hopp
Bredde: 250px;
Høyde: 250px;

Vi setter den opprinnelige bredden på div til 100px og høyde til 90px, så bruker vi en overgangseffekt på både bredde og høyde på div i 2 sekunder. Å spesifisere varigheten er et must ellers vil overgangen ikke gjelde. Dessuten vil overgangseffekten oppstå når brukeren bringer musen på DIV -beholderen.

Produksjon

En overgangseffekt ble implementert med suksess på DIV -beholderen.

Overgangs-varighet

Denne egenskapen spesifiserer for hvor lenge overgangseffekten skal fortsette å skje. Hver eiendom kan gis en enkelt varighet, eller du kan tilordne forskjellige varigheter til forskjellige CSS -egenskaper.

Syntaks

Tidsopplevelse: Tid | arve | første;

Tidsparameteren spesifiserer varigheten av overgangseffekten.

Eksempel
Anta at du vil øke skriftstørrelsen og vekten til et avsnitt når en musemarkør blir brakt over den.

Html

Ta med mus over meg

Vi har definert vårt avsnitt.

CSS

P
Font-størrelse: 20px;
Overgangseiendom: Fontstørrelse;
Overgangs-varighet: 3S;

P: Hør
Font-størrelse: 50px;

Koden over spesifiserer at når musemarkøren blir brakt over avsnittet.

Produksjon

Egenskapen for overgangsforsyning fungerer som den skal.

Overgang-forsinkelse

Denne egenskapen spesifiserer forsinkelsen mellom en endring i en egenskap og starten på overgangseffekten.

Syntaks

Tidsopplevelse: Tid | arve | første;

Tidsparameteren spesifiserer ventetiden før overgangseffekten begynner.

Eksempel
Anta at du vil bruke en overgangseffekt på et DIV -element etter en forsinkelse på 2 sekunder, følg eksemplet nedenfor.

Html

Ta med mus over meg

I koden ovenfor har vi ganske enkelt opprettet en DIV -beholder.

CSS

div
Høyde: 100px;
Bredde: 100px;
bakgrunnsfarge: rosa;
Overgangseiendom: høyde;
Overgangs-varighet: 3S;
overgang-forsinkelse: 2s;

Div: Hopp
Høyde: 200px;

I henhold til ovennevnte kode, vil overgangseffekten oppstå etter forsinkelsen på 2 sekunder.

Produksjon

Dette er en overgangseffekt med en forsinkelse på 2 sekunder.

Overgangstiming-funksjon

Denne egenskapen brukes til å definere akselerasjonskurven for overgangseffekten.

Syntaks

Overgangs-timing-funksjon: EASE | lineær | Løshet | Easy-Out | Ease-in-Out | kubisk-bezier (n, n, n, n);

Alle parametrene er forklart nedenfor.

• letthet: Overgangseffekten oppstår på en sakte-sakte måte.
• lineær: Overgangseffekten vil ha samme hastighet fra start til slutt.
• Løshet: Overgangseffekten vil ha en langsom begynnelse.
• Easy-Out: Overgangseffekten vil ha en langsom slutt.
• Ease-in-Out: Overgangseffekten vil ha en langsom begynnelse så vel som en langsom slutt.
• kubisk-bezier (n, n, n, n): Verdiene for overgangseffekten vil bli satt på en kubisk-bezier måte.

Eksempel
Tenk på eksemplet nedenfor.

Html

Ta med mus over meg

En DIV -beholder ble ganske enkelt opprettet.

CSS

div
Høyde: 100px;
Bredde: 100px;
bakgrunnsfarge: rosa;
Overgangseiendom: bredde;
Overgangs-varighet: 2s;
overgangs-timing-funksjon: lineær;

Div: Hopp
Bredde: 200px;

I henhold til koden ovenfor vil bredden på DIV -beholderen endre seg på en lineær måte som betyr at overgangseffekten vil ha samme hastighet fra begynnelse til slutt.

Produksjon

Overgangseffekten skjer på en lineær måte.

overgang

Denne egenskapen er en shorthand -egenskap som brukes til å sette verdier til alle overgangsegenskapene ovenfor.

Syntaks

overgang: (eiendom) (varighet) (timing-funksjon) (forsinkelse);

Eksempel
Eksemplet nedenfor viser arbeidet med overgangsegenskapen.

CSS

div
Høyde: 100px;
Bredde: 100px;
Bakgrunnsfarge: Lightseagreen;
Overgang: bredde 0.5s lineære 1s;

Div: Hopp
Bredde: 200px;

Ved å bruke overgangsegenskapen bruker vi en overgangseffekt på bredden for 0.5 sek på en lineær måte med en forsinkelse på 1 sek.

Produksjon

Overgangsegenskapen fungerer som den skal.

Konklusjon

Overganger blir referert til som et skifte i tilstanden til et element jevnt i en spesifikk varighet. CSS gir forskjellige overgangsegenskaper som er som følger: overgangseiendom, overgangsforhold, overgangs-forsinkelse, overgangs-timing-funksjon og overgang. Alle disse egenskapene brukes til å spesifisere atferden til overgangseffekten som blir brukt på forskjellige HTML -elementer. I denne guiden forklares alle disse egenskapene ved hjelp av relevante eksempler.