Tænd dine menuer med animation med CSS

Det er gennem animation, at vi giver mening om verden: Døre svinger åbne, biler kører til deres destinationer, læber krølle ind i smil. Selv de ting, der føler sig øjeblikkelige, som lynnedslag eller slipper en telefon på dit ansigt, mens du bruger det i sengen, sker over tid. Det er gennem det forslag, som vi forstår, hvordan objekter relaterer og fungerer; Hvis de er lyse eller tunge, stive eller løs, forbundet eller adskilt, klæbrig eller glat.

På nettet er vi imidlertid vant til ting, der vises og forsvinder i blinke i øjet. Vi klikker på et link og alt ændres. Det er som at blive ført til et værelse blindfoldet, spinning omkring et par gange og fjerner blindfældet for at tage i omgivelserne. Du ved ikke engang, hvilken dør du indtastede igennem. Dette er stort set, hvor de fleste websteder er bygget. Vi kan gøre det bedre.

Når du lærer om potentialet for CSS animation. Vi Det kan være nemt at lade vores fantasi gå i hyperdrive og drys animationer på næsten alt. Mens animation kan være fantastisk, skal vi være forsigtige og altid spørge os selv: Er denne animation meningsfuld? Er det tilføjet nogen anden værdi end at være smuk? Er det lettere at bruge vores produkt?

Meningsfuld animation

I denne artikel skal vi arbejde med en fælles UI Design. Element: En menu skifte. Vi skal oprette menuen (og et ikon til at gå med det) med CSS, og få det til at komme i live med animationer. Vi sørger for, at animationerne er meningsfulde, men også anvende webpræstations bedste praksis for at sikre, at de er så glatte som muligt.

Du kan Forhåndsvisning af slutresultatet her . Når brugeren klikker på menuikonet, udvider vi ikonets baggrundsplade (en cirkel) for at dække skærmen og præsentere menuen overlejring.

I stedet for bare at blinke til et nært ikon, vil vi animere og morph de tre lodrette linjer (der udgør menuikonet) i en 'X', for at repræsentere et tæt ikon. Med andre ord, som menuen er afsløret ikonet morphs i en tæt knap.

Relaterede elementer

Du kan måske tænke 'så er dette en meningsfuld animation?' Godt, godt spørgsmål. Kort svar: Ja! Langere svar: Animationer er gode til at forbinde elementer på skærmen og vise, hvordan de relaterer til hinanden.

Når vi skalere menuens baggrundsplade til at blive menuen, viser vi, hvordan de to er tilsluttet - ligner, hvordan et appikon, når de trykkes på iOS eller Android, skalaer op og overtager skærmen, viser, at appen blev lanceret fra det meget ikon. Vores menuikon skifte ikke bare menuen: Det er menuen, kun kollapset.

Tilsvarende, ligesom hvordan en tænd / sluk-skifte transformerer mellem dens til og fra-tilstand, når du trykker på den på iOS, ændres vores menuvinkel mellem et menuikon og et nøje ikon afhængigt af, om vores hjemmeside menu er synlig eller skjult. Dette hjælper med at håndhæve ideen om, at de to ikoner fungerer på lignende måder: de styrer begge menuen.

Så mens vi gør vores hjemmeside sjovt at bruge, gør vi det også lettere at forstå, og forbedre brugererfaring nogensinde så lidt.

Se, hvordan du gør dette i video-tutorialet ovenfor og skriftlige trin nedenfor.

01. Kom godt i gang

Download projektfilerne . Åben op index.html. I en browser, og du bør se tre store links mod en hvid baggrund. Dette er menuen overlejring, vi afslører.

Først og fremmest skal vi skjule det. I stilarter.css. , tilføj disse stilarter til .menu-overlay. :

 Opacitet: 0;
Synlighed: Skjult; 

Med overlejringen Gone skal en knap vises i øverste venstre hjørne. Lad os tegne vores menuikon her, så der er noget at klikke på for at vise overlejringen. For at gøre det nemt at animere, tegner vi det ved hjælp af bare HTML og CSS; ingen bitmaps eller vektorer. Vi har allerede fået noget HTML i index.html. Til menuen: en beholder ( .menu ), en baggrund ( .menu-cirkel ), et link ( .menu-link. ) og ikonet ( .Menu-ikon ) med et spænding for hver linje.

Have en separat Div. For baggrunden er en noget ukonventionel tilgang. Hvis vi ikke var ved at tilføje animationer til denne cirkel, ville vi ikke have brug for en separat Div. ; Vi kunne bare tilføje en Border-Radius. og baggrundsfarve til vores Menu-Link. .

Men vi ønsker at være fri til at bruge transformation Ejendom på cirklen, så vi kan skalere det uden at påvirke selve ikonet, så vi skal afkoble baggrunden fra ikonet.

Lad os begynde at tegne de linjer, der udgør ikonet. Hvad har de alle til fælles? De er lige så brede, de har afrundede hjørner, er helt placeret, og de har en baggrundsfarve. Da alle linjerne deler MENU-LINE. Klasse, lad os bruge den til at indstille disse delte egenskaber:

 .Menu-line {
 Baggrundsfarve: # 333;
 Højde: 2px;
 Bredde: 100%;
 Border-radius: 2px;
 position: absolut;
 Venstre: 0;
} 

Så kan vi bruge linjens unikke klasser til at indstille lodret position:

 .Menu-line-1 {top: 0; }

.menu-line-2 {
 TOP: 0;
 Bund: 0;
 Margin: Auto;
}

.Menu-line-3 {bunden: 0; } 

02. Tilføj en svæveffekt

Lad os gøre ikonet klart klikbart ved at tilføje en svæveffekt. I stilarter.css. , opret en ny vælger til Menu-Circle. For at skalere det op, når du svæver over menuen:

 .Menu: Hover .menu-cirkel {transformation: skala (1.4); } 

Nu kan vi tilføje vores første animation. Tilføje "Overgang: Alle 0,2s lette-in-out" til .menu-cirkel {} (ikke til svævestatus). Vi fortæller browseren at animere alle ejendomme, der kan ændre sig for .menu-cirkel . Så når vi skalaler det på svæve, animerer den i løbet af 0,2 sekunder til sin nye tilstand med en timingfunktion af lette-in-out .

Hvordan ved du, hvilken timing-funktion at vælge? Først og fremmest undgå at bruge en lineær timing-funktion. Få ting i den virkelige verden bevæger sig på en perfekt konstant hastighed, så genstande animeret med en lineær timing funktion har tendens til at se unaturlig og stiv (som Einstein ville have sagt, "GUD ikke spiller terninger med en lineær timingfunktion").

Som en tommelfingerregel, lette-out. Fungerer godt til at præsentere nye genstande, og lette-in. Fungerer godt til fjernelse af objekter. Og når du er i tvivl, lette-in-out er en solid timing-funktion til standard til: den har en langsom begyndelse og en langsom afslutning, hvilket skaber en glat og fluid animation.

03. Vis og skjul menuen

Lad os bruge jQuery til at vise og skjule vores nyoprettede overlejring. I script.js. , skifte klassen af åben på .menu-overlay. Inde i den eksisterende klik handler:

  $ (". MENU-Overlay"). Toggleclass ("åben"); 

Vis derefter overlejringen, når den har en klasse af åben:

 .Menu-overlay.open {
 Opacitet: 1;
 Synlighed: Synlig;
} 

04. Tilslut menuikonet

Overgangen vi tilføjede tidligere betyder, at vi allerede har en pæn Fade-effekt, der foregår, når vi viser og skjuler overlejringen. Men vi kan få det til at ligne menuikonets baggrund bliver menuen overlejring, og bedre forbinde de to visuelt.

At opnå denne effekt er nemmere end det ser ud til: Alt vi skal gøre er at hurtigt forstørre menuen cirkel, når det klikkes. Overlejringen vil fade samtidig, hvilket skaber illusionen, at menuikonet omdannes til overlejringen.

Vi skal være i stand til at style menuen cirkel, når menuen er blevet klikket. Åben op script.js. , og inde i vores eksisterende klikfunktion skifte klassen åben for vores .menu :

  $ (". Menu"). Toggleclass ("Open"); 

Nu kan vi målrette denne klasse med CSS og udvide cirklen, da menuen åbnes. I bunden af Style.css. , udvide .menu-cirkel hvornår .menu har også en klasse af .åben :

 .Menu.Open .Menu-Circle {Transform: Scale (60);
} 

05. Transform ikonet

Vi har en smuk åbenbaringseffekt for vores menu, men hvordan tænder vi menuikonet i et tæt ikon? Det er overraskende nemt, når du ved, hvordan - vi behøver kun at indstille tre CSS egenskaber. For det første skal vi skjule mellemlinjen, mens menuen vises:

 .Menu.Open .Menu-line-2 {opacity: 0; } 

Så alt vi skal gøre er at vende de to andre linjer 45 grader i modsatte retninger (linjerne skal pege i forskellige retninger for at danne en 'x', så bemærk, hvordan en af ​​linjerne har en negativ rotation på 45 grader):

 .Menu.Open .Menu-line-1 {
 Transform: Drej (-45deg);
}

.menu.open .menu-line-3 {
 Transform: Drej (45Deg);
} 

Godt, slags. Vi skal også centrere disse to linjer lodret. På dette tidspunkt kunne du tænke 'nemt! Vi skal bare ændre top og bund position til at centrere dem '. Og du ville være rigtig - hvis vi ikke animerede dette ikon.

Da vi kun kan opnå hardware-accelererede animationer ved at begrænse os til at animere transformation og Gennemsigtighed Egenskaber, vi bliver nødt til at ty til at centrere linjerne gennem transformationer.

 .Menu.Open .Menu-line-1 {
 Transform: Translatey (7px) Rundtykke (-50%) Drej (-45deg);
}

.menu.open .menu-line-3 {
 Transform: Translatey (-7px) Rundture (50%) roterer (45deg);
} 

Disse transformationer vil bevæge de to linjer, så de er vertikalt centreret inden for ikonbeholderen, og drej dem derefter til at danne korset.

Lad os bryde det ned. Vi har to oversættelser, der bruges samtidigt: Rundture (7px) og Rundture (-50%) . Den første transformation, Rundture (7px) , bruges til at flytte linjenes øverste kant til det vertikale center af lærredet. Maths her er simpel: 14 er højden af ​​vores ikon, ved at dividere det med to får vi mellempunktet: 7.

Den anden transformation, Rundture (-50%) , bruges til at flytte linjen, så linjens lodrette center, ikke dets øverste kant, byder på det vertikale centerpunkt i lærredet.

Normalt når du bruger % Log på CSS Du henviser til forælder til et element (indstilling Bredde: 100% Matcher elementets bredde til den for moderselskabet), men hvis du bruger procentdele med den omdannelsesejendomme, refererer du til selve elementet, ikke forældren. Så for os at finde en linjens højde og flytte den opad med halvdelen af ​​det, alt vi har brug for er Rundture (-50%) .

06. Morph mellem ikoner

I stedet for blot at erstatte menuikonet med det tætte ikon, lad os morph mellem de to stater.

Start med at tilføje en overgang til .menu-line. i Style.css. :

 Overgang: Alle 0,25S lette-in-out; 

TA-DA! Et morphing menuikon. Animationen er dog lidt kedelig. Lad os rette det. For at gøre linjerne ser mere levende, kan vi rotere dem begge yderligere 90 grader. Ikonet vil se det samme i sidste ende, men linjerne vil rejse yderligere i samme tidsperiode. Ændre rotationerne til rotere (-135deg) og rotere (135deg) .

Som en tommelfingerregel kan du altid forbedre en animation ved at bruge en brugerdefineret Bézier-kurve, der er bedre tilpasset din animation. Vi bruger i øjeblikket lette-in-out - Det betyder, at animationen vil have en langsom start og afslutning, med et hurtigere tempo i midten.

Jeg tror, ​​at en mere fjederlignende effekt passer til vores ikon. Lad os få det til at spinde hurtigt, med en lille hoppe effekt som det kommer til en ende. Til .menu-line. , udskift " lette-in-out " Med en brugerdefineret Bézier kurve:

 Overgang: Alle 0,25s Cubic-Bezier (0,175, 0,885, 0,32, 1,275); 

Hvad er alle disse tal? Bare rolig: Bézier kurver er sjældent skrevet for hånden. Du bruger Cubic-Bezier () For at definere tempoet i en animation over tid, og i stedet for at skrive dem alene, anbefaler jeg at bruge et referenceside. Dette kommer fra EASINGS.NET. Det overskrider i slutningen af ​​animationen, og skaber en subtil hoppe effekt.

Mens vi er på det, skal du gå til EASINGS.NET. og tag koden for rehequoutexpo. . Vi bruger dette til at skabe en mere raffineret effekt for menuen Baggrundsanimation. Opdater overgangen af .menu-cirkel At bruge denne brugerdefinerede bézier kurve, og gøre animationen lidt længere (0,5s):

 Overgang: Alle 0,5s Cubic-Bezier (0,19, 1, 0,22, 1); 

Tillykke, du har oprettet et sæt animationer, der er meningsfulde: de hjælper dig med at forstå, hvad der sker på stedet, mens du navigerer det, hvilket skaber en følelse af rumlig bevidsthed. På toppen af ​​det kører animationerne jævnt.

Ved kun at animere transformations- og opacitetsegenskaberne kan vi sørge for, at browserens hardwareaccelerationsstøtte kan sparke ind og undgå unødig lag. Når du spiller rundt med animationer, skal du sørge for at krydsede disse to bokse: Gør dem meningsfulde og smukke.

Denne artikel optrådte oprindeligt i Net Magazine. Udgave 281. Abonner på nettet her .

Relaterede artikler:

• 10 Imponerende eksempler på CSS3 animation
• 28 Fremragende eksempler på CSS
• Kom godt i gang med webtilgængelighed