Sammen med introduksjonen av CSS3 kommer mange nye funksjoner som er tilgjengelige for bruk i å skape flotte effekter; En av de mest nyttige er overgangseiendommen .
Overgangseiendommen er en viktig ny utvikling i CSS. Den kan brukes til å skape en dynamisk endringseffekt på en div eller klasse ved hjelp av en enkel struktur:
transition: property duration timing-function delay;CSS3s overgang er en fin måte å legge til litt animasjon på nettsteder uten det store overheadet til et JavaScript-bibliotek som jQuery.
Før vi starter, kan du se en demo her av Overgangseiendommen i aksjon .
For det første, for at overgangseiendommen skal fungere, må standardegenskapen som den blir brukt på, defineres. Formentlig de to vanligste egenskapene som skal defineres er bredde og høyde. For å skrive eiendommen frittstående bruk bare:
transition-property: define propertyEtterpå, når eiendommen er definert, må start- og sluttverdiene tilordnes. Ved verdier som bredde eller høyde må eiendommen settes med en startverdi og deretter en sluttverdi med en annen tilstand.
For eksempel, her setter vi overgangsegenskapen til bredde, deretter startverdien av bredden og sett deretter sluttverdien når elementet svinger over:
#mainheader {transition-property:width;width:50px;}#mainheader:hover {width:75px;}Nå som vi har definert egenskapen å transformere, start- og sluttverdiene, må vi definere varigheten av overgangen. Dette oppnås ved å definere en lengde i enten sekunder eller millisekunder som nedenfor:
transition-duration: duration;Bygg dette inn i eksemplet følgende kode er opprettet:
#mainheader {transition-property:width;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Dette betyr at mainheader div vil utvide med 25px over en varighet på 5 sekunder.
Koden er tilstrekkelig til å skape en fin effekt, men vi kan videreutnytte CSS3-overgangseiendommen ved å bruke timing-funksjon. Ved hjelp av denne egenskapen er det mulig å endre hastighetskurven for overgangsperioden. Overgangseiendommen er som standard satt til en lineær kurve. Du kan imidlertid definere brukervennlighet, lette inn, lette ut, lette ut og til og med kubisk-bezier for å endre hastighetskurven. Cubic-bezier lar deg definere dine egne verdier med (n, n, n, n) hvor n kan være mellom 0 og 1 (for eksempel vil lineær være (0,0,1,1)).
Å legge til i denne koden til vårt eksempel resulterer i:
#mainheader {transition-property:width;transition-timing-function:ease-in-out;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Videre definerer en overgangsperiode, med overgangsforsinkelse, bruk av overgangsforsinkelsesegenskapen en pause før overgangseffekten begynner:
transition-delay: time;Endelig er det viktig å vurdere to ting når du bruker CSS3 overgangseiendommen. For det første krever de fleste nettlesere i omløp for øyeblikket et nettleserprefiks for å bruke det (unntakene er IE10, Opera og Firefox16 +):
-moz-overgang: for Firefox 15
-webkit-overgang: for Chrome og Safari
(Husk at IE9 og lavere ikke støtter overgangseiendommen i det hele tatt.)
For det andre, selv om jeg har brukt lang hånd i eksemplene ovenfor for klarhet, anses det som best praksis å skrive i kort form, som følger:
#mainheader {-moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */-webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */transition: width ease-in-out 0.5s 0.1s;width:500px;}#mainheader:hover {width:750px;}Bruk CSS3s overgangseiendom? Hvordan sammenligner det med jQuery-baserte tweens? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, bevegelsesbilde via Shutterstock.