Animationer på en webside kan tiltrække flere brugere. Spørg dig selv dette - hvis du skulle se en webside, der har en hel del animation, ville du ikke ønske at udforske mere? Nu, med CSS-overgange, kan du gøre dit arbejde levende med nogle fantastiske animationer. Og husk, disse skal gøres rigtigt. Lad os udforske verdenen af CSS-overgange i følgende rækkefølge:
- Hvorfor CSS-overgange?
- Overgangsejendommen
- Hvad skal du specificere?
- Overgangs-timing-funktion Funktionsegenskab
- Transition-Delay Property
Hvorfor CSS-overgange?
Lad os tage en instans. Hvis du skulle ændre farven på et element fra hvid til blå, er denne ændring næsten øjeblikkelig. For en mere animeret effekt kan du få denne ændring til at ske gradvist. Dette ser også ret visuelt tiltalende ud. Ved at aktivere CSS-overgange kan du tilpasse den måde, som ændringerne finder sted. Du kan definere, hvordan ændringerne i elementerne sker ved bestemte tidsintervaller, der følger en accelerationskurve.
Med CSS-overgange kan du definere ændringerne for elementer, de specifikke tidsintervaller, hastigheden på accelerationskurven og meget mere. Du kan gøre alt dette uden at bruge Flash eller JavaScript .
kok vs marionet vs salt
For en bedre forståelse kan du henvise til billedet nedenfor:
På billedet ovenfor skifter HTML-elementet fra rød til blå i løbet af et sekund. Du vil også se den mellemliggende farve, når overgangen finder sted. Hvis du ikke vil bruge CSS-overgange, vil du bemærke, at farveændringen fra rød til blå er øjeblikkelig - du vil ikke se den mellemliggende farve. Med CSS-overgange vil du bemærke en animeret effekt, når HTML-elementerne skifter fra den gamle tilstand til den nye.
Overgangsejendommen
Du kan bruge stenografisk overgangsegenskab til at kontrollere CSS-overgange. Brug af denne stenografi er ikke kun let, men det kan også undgå parametre, der ikke er synkroniserede, der kan være ret frustrerende at debugge i CSS.
Overgangsejendommen specificerer de CSS-egenskaber, som du vil have overgangseffekten til. Kun disse CSS-egenskaber er animerede.
Syntaks:
overgang:
Som nybegynder har du muligvis problemer med at bruge stenografi. Hvis du synes, at brug af stenografi er lidt kompliceret for dig lige nu, kan du specificere overgangsegenskaberne separat. For et HTML-element kan du angive overgangsegenskaberne en efter en som vist i nedenstående eksempel:
div {bredde: 100px højde: 100px baggrund: lyseblå overgangsegenskab: bredde overgangsvarighed: 2s overgangs-timing-funktion: lineær overgangsforsinkelse: 1s} div: svæver {bredde: 300px}Hold markøren over kassen
I ovenstående eksempel har vi specificeret egenskaberne (overgangsegenskab, overgangsvarighed, overgangs-timing-funktion og overgangsforsinkelse) og deres værdier separat. Vi vil snart lære om disse overgangsegenskaber.
Hvad skal du specificere?
Der er primært to ting, som du skal angive for at oprette CSS-overgange: CSS-ejendommen, der vil føje en effekt til, og tidsvarigheden for den effekt.Du skal huske en ting i tankerne - når du ikke angiver tidsvarigheden, vil overgangen have en standardværdi på 0 , og der vil ikke være nogen effekt.
Lad os overveje et eksempel:
Nedenstående kode definerer en overgangseffekt af egenskaben bredde i en varighed på fem sekunder.
div {bredde: 100px højde: 100px baggrund: blå overgang: bredde 5s} div: svæver {bredde: 600px}Flyt markøren over div-elementet ovenfor for at se overgangseffekten.
I ovenstående kode vil du se, at når du holder markøren over den blå boks, øger den blå boks bredden gradvist i en varighed på fem sekunder. Du vil også bemærke, at når du fjerner markøren fra den blå boks, vender den blå boks gradvist tilbage til sin oprindelige størrelse (ikke øjeblikkeligt). Du kan også ændre værdierne for bredde og tidsvarighed for at se, hvordan denne overgangsejendom påvirker HTML-elementet.
Du kan også tilføje overgangseffekten til mere end en ejendom. Du kan gøre det ved at bruge kommaer til at adskille egenskaberne. Lad os overveje et eksempel:
I koden nedenfor er overgangsegenskaben specificeret til bredde, højde og transformation.
div {polstring: 15px bredde: 150px højde: 100px baggrund: grøn overgang: bredde 2s, højde 2s, transformer 2s} div: svæver {bredde: 300px højde: 200px transform: roter (360deg)} Hej Verden (Svæv over mig)
Med ovenstående eksempel vil du se, hvordan den grønne boks bevæger sig, når du svæver over boksen.
Vi har kun angivet ejendommen og varigheden. Lad os se de andre parametre med forskellige eksempler.
Overgangs-timing-funktion Funktionsegenskab
Denne egenskab definerer hastighedskurven for overgangseffekten. Det kan tage følgende værdier:
- Nem værdi: Dette er standardværdien, hvor effekten er langsom i starten, derefter hurtigere og ender langsomt.
- Lineær værdi: Denne effekt varierer ikke overgangshastigheden - den holder hastigheden konstant fra start til slut.
- Nemmere værdi: Denne effekt starter langsomt.
- Nedsættelsesværdi: Denne effekt har en langsom ende.
- Ease-in-out-værdi: Denne effekt har en langsom start såvel som en langsom afslutning.
- Cubic-bezier Value (n, n, n, n): Du kan specificere dit eget sæt værdier i funktionen cubic-bezier.
Koden nedenfor viser overgangseffekterne for lineære, lette, lette ind, lette ud og lette ind-ud-værdier.
div {bredde: 100px højde: 100px baggrund: lyserød overgang: bredde 2s} # div1 {overgang-timing-funktion: lineær} # div2 {overgang-timing-funktion: lethed} # div3 {overgang-timing-funktion: lethed-i } # div4 {overgang-timing-funktion: let ud} # div5 {overgang-timing-funktion: let-ind-ud} div: svæver {bredde: 300px}Hold markøren over div-elementerne nedenfor
lineær
lethed
lethed
let ud
let ind-ud
Transition-Delay Property
Nogle gange vil du have en animation, der skal forekomme efter en bestemt varighed. Overgangsforsinkelsesegenskaben giver dig mulighed for at specificere forsinkelsen for en overgangseffekt. Du kan angive forsinkelsen i sekunder.
Lad os tage et eksempel for at se forsinkelsen i overgangseffekten:
div {bredde: 100px højde: 100px baggrund: gul overgang: bredde 3s overgangsforsinkelse: 1s} div: svæver {bredde: 300px}Hold markøren over div-elementet nedenfor
Bemærk: Du kan se, at 1 sekund forsinkelse inden effekten starter
I koden ovenfor, når du holder markøren over den gule boks med markøren, vil du bemærke (i et sekund), at der ikke er nogen effekt. Efter et ventetid på et sekund vil du bemærke effekten.
Med dette kommer vi til slutningen af denne CSS Transitions-artikel. Du kan føje animationer til dine websider nu. Prøv disse eksempler.
Tjek vores som kommer med instruktørstyret live træning og projektoplevelse i det virkelige liv. Denne træning gør dig dygtig til at arbejde med back-end og front-end webteknologier. Det inkluderer træning i webudvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.
Har du et spørgsmål til os? Nævn det i kommentarfeltet på “CSS Transition” blog, så vender vi tilbage til dig.