CSS -forsinkelse

Denne artikkelen vil diskutere ved bruk av CSS -forsinkelsesegenskapen i HTML. Forsinkelsesegenskapen brukes som en subpart for to forskjellige egenskaper, som er overgangs- og animasjonsegenskaper. I begge egenskapene gjennomgår elementet som er tildelt en viss transformasjon. Under denne transformasjonen kan forsinkelsesegenskapen brukes til å stoppe transformasjonen i en viss periode. Nå vil vi implementere flere eksempler for denne egenskapen.

Eksempel 1: Overgangsforsinkelse på en div -bredde ved hjelp av stilkodetilnærmingen

I dette eksemplet vil vi bruke forsinkelsesegenskapen til å overføre en div element bredde-messig ved å bruke stilkoden tilnærming. Egenskapen for overgang-forsinkelse vil bli brukt på en div, og overgangen vil skje ved divens bredde.

I dette skriptet begynner vi med filteksten. Vi åpner stilmerket og lager en stylingklasse for Div -elementet i denne taggen. I denne stylingklassen vil vi legge til høyde og bredde for standardstørrelsen på DIV. Etter dette vil vi legge til overgangsegenskapen på bredden ved å bruke den som nøkkelord. Deretter vil vi definere overgangsvarigheten på sekunder. På slutten av denne taggen vil vi også definere begrensningene for overgangsforsinkelse ved å gi den en verdi på få sekunder.

Etter dette vil vi arve denne klassen for en svevefunksjon der vi vil legge til breddeegenskapen, som vil bli økt fra forrige innstilling og aktivert når diven blir svevet. Denne endringen i bredde vil bli administrert av overgangsegenskapene, inkludert overgangs-forsinkelsesegenskapen, som vil avgjøre tidsgapet for denne overgangen. Deretter vil vi avslutte stylingegenskapene og lukke stilmerket for å bevege seg mot filens kropp. Vi vil gi siden en overskrift i kroppskoden ved å bruke H1 stikkord. Etter dette vil vi legge til et DIV -element av en div -tag der vi ikke vil legge til noen verdi fordi det hele er definert i stilkoden i filens overskrift.

Det første utdraget viser at DIV er i standardfasen. Etter å ha svevet på Div, vil overgangen skje i henhold til egenskapene som er definert i stilkoden som kan observeres i det andre utdraget.

Eksempel 2: Overgangsforsinkelse på en div høydemessig ved hjelp av stilkodetilnærmingen

I dette eksemplet bruker vi forsinkelsesattributtet til overgang et DIV -element vertikalt ved hjelp av Style Tag -teknikken.

Vi starter med filens overskrift i dette skriptet. Vi åpner stilmerket i denne taggen og bygger en stylingklasse for DIV -elementet. I denne stilklassen vil vi legge til høyde og bredde for Divs standardstørrelse. Etter det bruker vi et nøkkelord for å legge til overgangsattributtet til høyden på en div. Deretter, etter denne taggen, vil vi definere overgangstiden i sekunder og overgangsforsinkelsesbegrensningen ved å gi den en verdi på sekunder. Vi vil arve denne klassen for en svevefunksjon og legge til høydeegenskapen, som vil bli økt fra forrige verdi og aktivert når Div har svevet. Denne høydenes endring vil bli administrert av overgangsegenskapene, som inkluderer overgangs-forsinkelsesegenskapen og bestemmer tidsgapet for denne overgangen.

Etter det vil vi legge til et divelement med en div -tag i kroppen. Filen blir deretter lukket ved å lukke alle taggene.

Den første utgangen viser at DIV er i sin standardtilstand. Når vi svever over den, oppstår overgangen i henhold til egenskapene som er gitt i stilmerket, vist i den andre utgangen.

Eksempel 3: Animasjonsforsinkelse på en divs toppside ved hjelp av stilkoden tilnærming

I dette eksemplet bruker vi forsinkelsesegenskapen mens vi bruker stilkodetilnærmingen for å animere et divelement fra oversiden.

I dette skriptet begynner vi med filens overskrift. Vi åpner stilmerket og lager en stylingklasse for DIV -elementet i denne taggen. Vi vil legge til høyde og bredde for DIV -standardstørrelsen i denne stilklassen. Etter det bruker vi et nøkkelord for å legge til divens animasjonseiendom. På slutten av denne taggen gir vi animasjonstiden i sekunder og overgangsforsinkelsesbegrensningen ved å gi en verdi på sekunder. Vi lager en ny klasse for animasjonen og legger til en eiendom for størrelsen for toppsiden av div som vil bli økt fra forrige verdi og aktiv etter forsinkelsesperioden.

Overgangsegenskapene vil kontrollere animasjonen, inkludert animasjon-forsinkelsesegenskapen, som kontrollerer tidsgapet før animasjonen begynner. Styling -attributtene blir deretter fjernet, og stilkoden vil være lukket, slik at vi kan gå videre til filens kropp. Vi vil legge til et divelement med en div -tag, men ingen verdi fordi alt er definert i filens stilkode.

Den første utgangen viser at DIV er i sin standardposisjon. Når animasjon-forsinkelsestiden er ferdig, skjer animasjonen i henhold til egenskapene som er gitt i stilkoden, som sett i den andre utgangen.

Eksempel 4: Animasjonsforsinkelse på en divs venstre side ved hjelp av stilkodetilnærmingen

I dette eksemplet bruker vi forsinkelsesattributtet i forbindelse med Style Tag -metoden for å animere et divelement fra venstre side.

I dette skriptet begynner vi med filens overskrift. Vi åpner stilmerket og lager en stylingklasse for DIV -elementet i denne taggen. Vi vil legge til høyde og bredde for DIV -standardstørrelsen i denne stilklassen. Etter det bruker vi et nøkkelord for å legge til divens animasjonseiendom. På slutten av denne taggen gir vi animasjonstiden i sekunder og overgangsforsinkelsesbegrensningen ved å gi en verdi på sekunder.

Vi lager en ny klasse for animasjonen og legger til en eiendom for størrelsen for toppsiden av div som vil bli økt fra forrige verdi og aktiv etter forsinkelsesperioden. Overgangsegenskapene vil kontrollere animasjonen, inkludert animasjon-forsinkelsesegenskapen, som kontrollerer tidsgapet før animasjonen begynner. Styling -attributtene blir deretter fjernet, og stilkoden vil være lukket, slik at vi kan gå videre til filens kropp. Vi vil legge til et divelement med en div -tag, men ingen verdi fordi alt er definert i filens stilkode.

Div er i sin standardposisjon, som vist i det første resultatet. Etter at animasjon-forsinket timer utløper, skjer animasjonen i henhold til parametrene som er spesifisert i stilkoden, som sett i den andre utgangen.

Konklusjon

I denne artikkelen har vi diskutert ved hjelp av CSSs forsinkelsesegenskap på hypertekstmarkeringsspråket. Forsinkelsesegenskapen brukes ofte med CSSs overgangs- og animasjonseiendom. Denne egenskapen brukes som en underforsyning for animasjons- og overgangseiendommen, som hjelper til med å definere den enkelte eiendoms forsinkelse. Vi implementerte disse egenskapene med forsinkelsesegenskapen som en underforsyning i Notisblokkene ++ miljøet.