Slik bruker du CSS3-overganger og animasjoner for å markere brukergrensesnittendringer

Designere og kunstnere har en lang historie med å eksperimentere med bevegelse, effekter og ulike slags illusjoner med det formål å legge til et ekstra lag i arbeidet deres. Op kunstbevegelsen begynte å bruke optiske illusjoner på 1960-tallet for å gi inntrykk av bevegelse.

Siden da har nyere og nyere tilnærminger kommet seg opp, for eksempel den nylig populære kinetiske kunsten som utvider betrakterens perspektiv ved å bruke flerdimensjonal bevegelse. Motion opptrådte også i datavitenskap med oppfinnelsen av den første blinkende markøren i 1967.

I front-end-utviklingen ble DOM-elementer vanligvis animert av JavaScript før CSS3 ble utgitt, og det er en metode som fortsatt fungerer, men Nye egenskaper introdusert av CSS3 tillater oss å forbedre våre design med forskjellige effekter og bevegelse på en mer intuitiv måte.

De to viktigste teknikkene CSS3 tilbyr er overganger og animasjoner. I dette innlegget vil vi se på hva de er, hva er forskjellen mellom dem, og hvordan du kan bruke dem.

overganger

Overganger og animasjoner brukes begge til visualisere endringer i staten av et HTML-element av endre en eller flere av sine CSS egenskaper.

Den enkleste formen for tilstandsendring av visualisering er å endre fargene på en knapp eller en lenke når den er svevet på. Når det skjer, får elementet en litt annen stil, som vanligvis settes av betrakteren som om noe har flyttet på skjermen.

Endre CSS-egenskapene til en kobling på svever (eller fokus eller klikk) er den eldste og enkleste formen for overganger, og den eksisterte godt før CSS3-tiden.

 en farge: oransje;  a: svever farge: rød;  a: fokus farge: blå;  a: besøkt farge: grønn; 

Overganger brukes når et HTML-element endres fra en forhåndsdefinert tilstand til en annen. CSS3 introduserte nye egenskaper som tillater mer sofistikerte visualiseringer enn tidligere, for eksempel timingfunksjoner eller varighetskontroll.

Vi vil se på de nye CSS-egenskapene i neste avsnitt, etter å ha forstått hvordan animasjoner er forskjellige. For nå, la oss se de viktigste tingene du trenger å vite om overganger.

1. De har alltid en begynnelse og en sluttstat.
2. Statene mellom start- og sluttpunktene er implisitt definert av nettleseren, vi kan ikke endre det med CSS.
3. De krever eksplisitt utløsende, slik som å legge til en ny pseudoklass av CSS, eller en ny klasse av jQuery.

Du kan se et vakkert eksempel på smart utnyttede CSS3-overganger nedenfor, der forfatteren avslører skjult informasjon på en måte som ikke er påtrengende, men fremdeles styrer brukerens fokus på det nye innholdet.

animasjoner

Hvis vi ønsker å visualisere tilstandsendringer med mer kompliserte bevegelser, eller hvis vi ikke har en eksplisitt utløser, f.eks. hvis vi ønsker å starte effekten når siden lastes, animasjoner er veien å gå.

Animasjoner gjør det mulig å definere en mer kompleks sti ved å sette inn og konfigurere vår egen nøkkelbilder. nøkkelbilder er mellomliggende poeng i løpet av animasjonen, som gjør at vi kan endre stilen til det animerte elementet så mange ganger som vi vil.

Selv om CSS3 tilbyr flotte måter å bygge sofistikerte animasjoner, er det vanligvis vanskeligere å lage dem enn overganger, derfor er det mange flotte animasjonsbiblioteker der ute som kan forenkle vårt arbeid.

De viktigste tingene du trenger å vite om CSS3-animasjoner, er:

1. de krever ikke eksplisitt utløsing, de kan starte på sidebelastning eller når en annen DOM-hendelse finner sted i nettleseren
2. de kan brukes i tilfeller der overganger brukes, for eksempel når en ny klasse eller pseudoklass blir lagt til eller fjernet (selv om det er en mindre hyppig brukstilstand)
3. de krever at vi definerer noen keyframes (mellomliggende stater)
4. Vi kan spesifisere tallet, frekvensen og stilen til disse nøkkelrammene

I eksemplet nedenfor kan du se en kul animert rullegardinmeny. Animasjonen starter når vi klikker på knappen. Dette oppnås ved å legge til ekstra klasser i listelementene med jQuery når klikkhendelsen oppstår.

Disse nye klassene er animert med spesifisert @keyframes regler i CSS-filen. De ekstra klassene fjernes av jQuery når brukeren klikker på knappen neste gang, og menyen blir skjult igjen.

CSS Egenskaper og The @keyframes At-regel

For overganger kan vi enten bruke overgang shorthand eiendom, eller 4 enkelt overgang-relaterte egenskaper: Overgangen-egenskap, Overgangen-varighet, Overgangen-timing-funksjon, og Overgangen-forsinkelse. Shorthand-egenskapen inneholder alle enkeltegenskapene i forkortet form.

For animasjoner er det animasjon shorthand eiendom på våre hender som står for ingen mindre enn 8 single animasjon egenskaper, nemlig animasjon-navn, animasjon-varighet, animasjon-timing-funksjon, animasjon-forsinkelse, animasjon-iterasjon-count, animasjon-retningen, animasjon-fill-mode, og animasjon-play-state.

Det viktigste med både overganger og animasjoner er at vi alltid må spesifisere CSS egenskaper som vil bli endret under tilstandsendringen. Med overganger ser det slik ut:

 .element bakgrunn: oransje; overgangseiendom: bakgrunn; overgangsperiode: 3s; Overgangstidsfunksjon: Lette inn;  .element: hover bakgrunn: rød; 

Vi spesifiserte bakgrunn eiendom, fordi dette er hva som vil bli endret under overgangen.

Vi kan endre mer enn én CSS-eiendom i en overgang, i så fall vil koden ovenfor bli endret slik: overgangseiendom: bakgrunn, grense;. Vi kan også bruke overgangseiendom: alle;, hvis vi ikke ønsker å spesifisere hver eiendom separat.

Vi kan velge stenografi overgang eiendom også. Hvis vi gjør det, må vi alltid være oppmerksom på den riktige rekkefølgen til de indre egenskapene (se syntaksen i dokumentene).

 .element bakgrunn: oransje; overgang: bakgrunn 3s enkelt-inn;  .element: hover bakgrunn: rød; 

Hvis vi ønsker å lage en animasjon, er vi pålagt å spesifisere de relaterte nøkkelbilder. CSS-egenskapene må endres i separat definert @keyframes på-reglene. Her er et eksempel på hvordan vi kan gjøre dette:

 .element posisjon: relativ; animasjonsnavn: lysbilde; animasjon-varighet: 3s; animasjon-timing-funksjon: brukervennlighet;  @keyframes slide 0% left: 0;  50% venstre: 200px;  100% venstre: 400px; 

I eksemplet ovenfor opprettet vi en veldig enkel glidende effekt. Vi definerte animasjon-navn, Deretter bundet 3 keyframes til det som vi spesifiserte i @keyframes slide ... på-reglene. Prosentandelene refererer til animasjonens varighet, slik at 50% skjer på 1,5 sekunder i eksemplet.

Vi kunne bruke shorthand animasjon eiendom også, eller kunne definere keyframes med den enklere fra til regel på følgende måte:

 .element posisjon: relativ; animasjon: lysbilde 3s enkelt inn;  @keyframes slide fra left: 0;  til venstre: 400px; 

Opprettelsen av mer komplekse animasjoner er sin egen kunstform. Hvis du er interessert, kan du lese to av våre animasjonsopplæringer om hvordan du lager en avansert telt, og hvordan du lager en sprettingseffekt.

Når du bygger overganger og animasjoner, må du vite det ikke alle CSS egenskaper kan animeres, så det er alltid en god ide å sjekke egenskapen du vil endre i CSS Animatable.

CSS3 animasjoner og overganger jobbet med leverandør prefikser i lang tid, som vi ikke trenger å bruke lenger, men Mozilla Developer Network anbefaler fortsatt å legge til -webkit prefiks for en stund, da støtten til webkitbaserte nettlesere bare nylig oppnådde stabilitet.