En av CSS3s nyvinninger er evnen til å lage overganger og animasjoner med atferd. CSS3 -animasjon kan brukes i mange nøkkelrammer for å endre et elements utseende og atferd. En animasjon etablerer mange overgangspunkter basert på distinkte nøkkelrammer, mens overganger lar deg gå fra en stat til en annen.

Gjennom denne artikkelen vil vi undersøke:

• Overgangsegenskaper i CSS
• Hvordan du bruker overgangseiendommen i CSS?

OK, la oss komme i gang!

Hva er overgangseiendom i CSS?

“Overgangseiendom”Gjør oss i stand til å endre eiendommens verdier jevnt i henhold til den spesifiserte varigheten. Det oppstår når CSS -egenskapen endrer verdien fra hverandre uten å blinke. Avhengig av staten kan den sveves eller aktiv. La oss nå gå til syntaksen til overgangsinnigheten.

Syntaks

Det er to ting du trenger å spesifisere når du oppretter en overgangseffekt:

• Legger en effekt til en CSS -eiendom.
• Angi varigheten av effekten.

Følg følgende syntaks for å legge til en overgangseffekt ved hjelp av overgangseiendommen:

Overgangseiendom: verdi;

I verdien av verdien, legg til en effekt av overgangen du vil bruke.

Følg den undergitte syntaks for å legge til varighetseffekten ved å bruke egenskapen overgangs-varighet:

Overgangs-varighet: Verdi;

Avhengig av dine preferanser, kan du også legge til en overgangsforsinkelse og en timingfunksjon.

Her er et eksempel der vi implementerer glideovergangen.

Hvordan du bruker overgangseiendom i CSS?

Vi kan bruke "Overgangseiendom”På ethvert element som div, overskrift, knapp og mange flere.

Ved å bruke et eksempel, la oss se hvordan overgangseiendommen fungerer.

Eksempel: Hvordan skyve inn fra venstre overgang i CSS?

Følgende eksempel vil vi lage en overskrift

inne i :

Skyv inn fra venstre overgang

Når vi utfører denne HTML -filen, vil den vise følgende utfall:

Her kan vi se at en enkel overskrift blir presentert. Nå vil vi flytte til CSS -delen, hvor vi skal bruke overgangsegenskapen på den opprettede beholderen. For dette formålet vil vi skrive følgende kode:

div
Bredde: 150px;
Høyde: 150px;
Bakgrunn: Goldenrod;
Overgangseiendom: bredde;
Overgangs-varighet: 1S;

Ovennevnte kodeblokk serverer følgende funksjonaliteter:

Bredde og høyde: Størrelsen på div er “150px”I bredde og“150px”I høyden.

bakgrunn: Fargen på div er satt til “Goldenrod”.

Overgangseiendom: Vi har satt overgangsegenskapen til bredden; Gjennom dette vil den gli fra venstre i overgang.

Overgangs-varighet: “1s”Eller ett sekund er overgangsvarigheten. Når vi flytter markøren ut av diven, i løpet av ett sekund, vil den gå til sin opprinnelige tilstand.

Merk: Hver gang CSS -breddeegenskapen endres, vil overgangseffekten starte.

Ta nå en ny verdi for breddeegenskapen som skal brukes til å musen over DIV -elementet. Størrelsen på breddeegenskapen er satt til “500px”. Den vil gli fra venstre til høyre når en markør beveger seg inn på elementet, og når du flytter musen ut av elementet, vil stilen gradvis gå tilbake til sin opprinnelige tilstand:

Div: Hopp
Bredde: 500px;

Etter det, gå til HTML -filen og utfør den. Det vil gi følgende utdata:

Etter å ha brukt overgangseiendommen til Div, kan vi nå se at den er aktiv.

Konklusjon

I CSS, for glide fra venstre overgang, "Overgangseiendom" benyttes. Du kan angi effekten av overgangen og dens varighet ved å bruke “Overgangseiendom”Og“Overgangs-varighetHenholdsvis egenskaper. Ved hjelp av et eksempel demonstrerte denne artikkelen hvordan overgangsegenskapen brukes til å gli fra venstre til høyre.