Hvordan ha flere CSS -overganger på et element

Mange online plattformer krever animasjoner på noen websider for å få appen til å se mer iøynefallende. For dette formålet bruker utviklerne CSS-egenskaper mens de designer front-end-grensesnittene. Mer spesifikt betyr CSS -overganger å bruke animasjoner på et HTML -element gjennom CSS -egenskapene på en slik måte at det automatisk bruker egenskapene etter den andre.

Denne artikkelen vil diskutere metoden for å anvende CSS -egenskaper for å ha flere overganger på et HTML -element.

Hvordan bruke flere CSS -overganger på et element?

Alt det krever er å først lage elementene i HTML som overgangene må brukes på, og deretter legge til CSS -ID eller klassevalgere i stilelementet for å referere til HTML -elementene.

Eksempel

La oss lage et DIV -beholderelement i HTML -kodekroppen og deretter bruke CSS -egenskapene på det for å få det til å se animert ut:

Hold over for å se overgangene

Hei bruker!!!

I ovennevnte kodebit:

• • En "

    ”Overskrift legges til med Inline CSS”margin”Eiendom satt til“1 Rem”Og overskriften sier“Hold over for å se overgangene”.

  • Etter det en “”Containerelement er lagt til med klassen erklært som“klassen min”.
  • “”Containerelement har teksten”Hei bruker!!!" inni det. CSS -overgangene vil bli brukt på dette DIV -elementet.

CSS -stilelementet skal ha alle nødvendige egenskaper som får Div til å se animert ut:

.klassen min
Font-størrelse: 3REM;
Margin: 2REM;
Justify-Content: Center;
Display: Flex;
Grense: 10px solid lilla;
Bredde: 20REM;
Høyde: 9REM;
Overgang: Farge 1s Easy-Out, Padding-Top 1s Ease-Out,
Padding-Bottom 1s Easy-Out, Font-størrelse 3S Ease-Out;

.MyClass: Hopp
Farge: blå;
Grense: 10px solid oransje;
Padding-top: 100px;
Padding-Bottom: 40px;
Fontstørrelse: 1.8rem;

I ovennevnte CSS -stilelement:

• • En klassevelger er lagt til som refererer til “klassen min”Div Container Element. Inne i det, forskjellige, er CSS -egenskaper definert for DIV -beholderelementet.
  • “skriftstørrelse”Eiendom setter størrelsen på teksten skrevet i DIV -beholderen til“3REM”.
  • “margin”Eiendom blir lagt til for å gi avstand til“2rem”Etter teksten eller overskriften.
  • “Justify-Content”Eiendom justerer teksten til DIV -beholderen til midten av DIV -beholderen.
  • “display-flex”Eiendom er lagt til for automatisk å justere innholdet i DIV -elementet riktig.
  • “grense”Eiendom blir lagt til for å sette grensevekten til DIV -beholderen som“10px”Og den definerer fargen på grensen som“lilla”.
  • “bredde”Eiendom definerer den vertikale lengden på DIV -elementet som“20REM”.
  • Tilsvarende "høyde”Eiendom definerer den horisontale lengden på DIV -elementet som“9REM”.
  • “overgang”Eiendom legges til for å definere tidspunktet for overgangene må brukes. For “farge”,“Padding-top”Og“Padding-Bottom”, Det er satt som“1 sekund" og for "skriftstørrelse”, Det er satt som“3 sekunder”.
  • Etter det pseudoklassen “:sveve”Er lagt til med CSS Class Selector”.klassen min”For å definere CSS -egenskapene som skal implementeres mens brukeren henger over elementet som er opprettet gjennom“klassen min”.
  • “farge”Eiendom er definert som“blå”Slik at når brukeren henger over elementet, endrer det umiddelbart tekstfargen til blå.
  • Neste, “grense”Eiendom er definert som endrer grensestørrelsen til“10px”Mens vi svever og fargen på grensene har blitt definert som“oransje”.
  • “Padding-top”Og“Padding-Bottom”Egenskaper er lagt til for å definere avstanden mellom innholdet og grensene fra henholdsvis topp og bunn.
  • “skriftstørrelse”Er definert som“8REM”Mens du svever.

Resultatene fra de ovennevnte anvendte CSS -overgangene vil være følgende:

Dette oppsummerer metoden for å anvende flere CSS -overganger på et HTML -element.

Konklusjon

CSS -overganger brukes på HTML -elementene for å få dem til å se animert. Alt det krever å anvende CSS -overganger er å legge til ID eller klassevelgeren i CSS -stilelementet som refererer til HTML -elementet som overgangene må brukes på, og deretter legge til alle nødvendige egenskaper i det som farge, font, grenser, polstring før så vel som etter overgangen. Denne artikkelen ledet om å bruke flere CSS -overganger på et HTML -element.