Animasjoner på en webside kan tiltrekke seg flere brukere. Spør deg selv om dette - hvis du skulle se en webside som har ganske mye animasjon, vil du ikke utforske mer? Nå, med CSS-overganger, kan du gjøre arbeidet ditt levende med noen flotte animasjoner. Og husk at disse må gjøres riktig. La oss utforske verden av CSS-overganger i følgende rekkefølge:
- Hvorfor CSS-overganger?
- Overgangseiendommen
- Hva trenger du å spesifisere?
- Overgangs-timing-funksjon Funksjon Egenskap
- Overgangsforsinkelses-eiendommen
Hvorfor CSS-overganger?
La oss ta en forekomst. Hvis du skulle endre fargen på et element fra hvitt til blått, er denne endringen nesten øyeblikkelig. For en mer animert effekt kan du få denne endringen til å skje gradvis. Dette ser ganske visuelt tiltalende også ut. Ved å aktivere CSS-overganger kan du tilpasse måten endringene skjer. Du kan definere hvordan endringene i elementene skjer ved bestemte tidsintervaller som følger en akselerasjonskurve.
CSS-overganger lar deg definere endringene for elementer, de spesifikke tidsintervallene, hastigheten på akselerasjonskurven og mye mer. Du kan gjøre alt dette uten å bruke Flash eller JavaScript .
For bedre forståelse kan du se på bildet nedenfor:
I bildet over vil HTML-elementet endre seg fra rødt til blått i løpet av ett sekund. Du vil også se mellomfargen når overgangen skjer. Hvis du ikke skal bruke CSS-overganger, vil du legge merke til at endringen i farge fra rød til blå er øyeblikkelig - du vil ikke se mellomfargen. Med CSS-overganger vil du legge merke til en animert effekt når HTML-elementene endres fra den gamle tilstanden til den nye.
Overgangseiendommen
Du kan bruke stenografisk overgangsegenskap for å kontrollere CSS-overganger. Bruken av denne stenografien er ikke bare enkel, men den kan også unngå parametere som ikke er synkroniserte, som kan være ganske frustrerende å feilsøke i CSS.
Overgangsegenskapen spesifiserer CSS-egenskapene du vil ha overgangseffekten til. Bare disse CSS-egenskapene er animerte.
ekstern metode påkalling java eksempel
Syntaks:
overgang:
Som nybegynner kan du møte noen vanskeligheter med å bruke stenografi. Hvis du tror at bruk av stenografi er litt komplisert for deg akkurat nå, kan du spesifisere overgangsegenskapene separat. For et HTML-element kan du spesifisere overgangsegenskapene en etter en som vist i eksemplet nedenfor:
div {bredde: 100px høyde: 100px bakgrunn: lyseblå overgangseiendom: bredde overgangsvarighet: 2s overgangstidsfunksjon: lineær overgangsforsinkelse: 1s} div: svever {bredde: 300px}Hold markøren over esken
I eksemplet ovenfor har vi spesifisert egenskapene (overgangsegenskap, overgangsvarighet, overgangstidsfunksjon og overgangsforsinkelse) og deres verdier hver for seg. Vi vil lære om disse overgangsegenskapene snart.
Hva trenger du å spesifisere?
Det er primært to ting du må spesifisere for å opprette CSS-overganger: CSS-egenskapen som ønsker å legge til en effekt, og varigheten av den effekten.Du må huske en ting i tankene - når du ikke spesifiserer varigheten, vil overgangen ha en standardverdi på 0 , og det vil ikke ha noen effekt.
La oss se på et eksempel:
Koden nedenfor definerer en overgangseffekt av breddeegenskapen i en varighet på fem sekunder.
div {bredde: 100px høyde: 100px bakgrunn: blå overgang: bredde 5s} div: hover {bredde: 600px}Flytt markøren over div-elementet over for å se overgangseffekten.
I koden ovenfor vil du se at når du holder markøren over den blå boksen, øker den blå boksen bredden gradvis i en varighet på fem sekunder. Du vil også merke at når du fjerner markøren fra den blå boksen, vil den blå boksen gradvis (ikke øyeblikkelig) gå tilbake til sin opprinnelige størrelse. Du kan også endre verdiene for bredde og varighet for å se hvordan denne overgangsegenskapen påvirker HTML-elementet.
Du kan også legge til overgangseffekten til mer enn én eiendom. Du kan gjøre det ved å bruke kommaer for å skille egenskapene. La oss se på et eksempel:
I koden nedenfor er overgangsegenskapen spesifisert for bredde, høyde og transformasjon.
div {polstring: 15px bredde: 150px høyde: 100px bakgrunn: grønn overgang: bredde 2s, høyde 2s, transformer 2s} div: hover {bredde: 300px høyde: 200px transform: roter (360deg)} Hei Verden (Svev over meg)
Med eksemplet ovenfor vil du se hvordan den grønne boksen beveger seg når du holder markøren over boksen.
Vi har bare spesifisert eiendommen og varigheten. La oss se de andre parametrene med forskjellige eksempler.
Overgangs-timing-funksjon Funksjon Egenskap
Denne egenskapen definerer hastighetskurven for overgangseffekten. Det kan ta følgende verdier:
- Enkel verdi: Dette er standardverdien der effekten er treg i begynnelsen, deretter raskere og slutter sakte.
- Lineær verdi: Denne effekten varierer ikke overgangshastigheten - den holder hastigheten konsistent fra start til slutt.
- Enkelhetsverdi: Denne effekten starter sakte.
- Enkel ut-verdi: Denne effekten har en langsom slutt.
- Enkel-inn-ut-verdi: Denne effekten har en treg start og en treg slutt.
- Kubisk bezier-verdi (n, n, n, n): Du kan spesifisere ditt eget verdisett i kubikk-bezier-funksjonen.
Koden nedenfor viser overgangseffektene for lineære, lette, lette inn, lette ut og lette inn-ut-verdier.
div {bredde: 100px høyde: 100px bakgrunn: rosa overgang: bredde 2s} # div1 {overgang-timing-funksjon: lineær} # div2 {overgang-timing-funksjon: letthet} # div3 {overgang-timing-funksjon: let inn } # div4 {transition-timing-function: ease-out} # div5 {transition-timing-function: ease-in-out} div: hover {width: 300px}Hold markøren over div-elementene nedenfor
lineær
letthet
letthet
lette ut
letthet ut
Overgangsforsinkelses-eiendommen
Noen ganger vil du at en animasjon skal forekomme etter en viss varighet. Overgangsforsinkelsesegenskapen lar deg spesifisere forsinkelsen for en overgangseffekt. Du kan spesifisere forsinkelsen i sekunder.
La oss ta et eksempel for å se forsinkelsen i overgangseffekten:
div {bredde: 100px høyde: 100px bakgrunn: gul overgang: bredde 3s overgangsforsinkelse: 1s} div: svever {bredde: 300px}Hold markøren over div-elementet nedenfor
Merk: Du kan observere den forsinkelsen på 1 sekund før effekten starter
I koden ovenfor, når du holder markøren over den gule boksen med markøren, vil du merke (i ett sekund) at det ikke er noen effekt. Etter et vente på ett sekund vil du merke effekten.
Med dette kommer vi til en slutt på denne CSS Transitions-artikkelen. Du kan legge til animasjoner på websidene dine nå. Prøv disse eksemplene.
hvordan lage en Java-pakke
Sjekk ut vår som kommer med instruktørstyrt liveopplæring og reell prosjektopplevelse. Denne opplæringen gjør deg dyktig i ferdigheter til å jobbe med back-end og front-end web-teknologier. Det inkluderer opplæring i webutvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.
Har du spørsmål til oss? Vennligst nevn det i kommentarfeltet på 'CSS Transition' -bloggen, så kommer vi tilbake til deg.