Slå på menyene dine ved hjelp av animasjon med CSS

Sep 12, 2025

hvordan

[1. 3]

Det er gjennom animasjon at vi gir mening om verden: Dører svinger åpent, biler kjører til sine destinasjoner, lepper krøller inn i smiler. Selv de tingene som føles øyeblikkelig, som lynet slår eller slipper en telefon på ansiktet ditt mens du bruker det i sengen, skjer over tid. Det er gjennom den bevegelsen som vi forstår hvordan objekter relaterer og fungerer; Hvis de er lette eller tunge, stive eller løs, tilkoblet eller separate, klebrig eller glatt.

På nettet har vi imidlertid brukt til ting som vises og forsvinner i blikket i et øye. Vi klikker på en lenke og alt endres. Det er som å bli ledet inn i et rom blindfoldet, spinning rundt noen ganger, og fjerne blindfoldet for å ta i omgivelsene. Du vet ikke engang hvilken dør du kom inn i. Dette er stort sett hvordan de fleste nettsteder er bygget. Vi kan gjøre det bedre.

Når du lærer om potensialet til CSS animasjon , Det kan være lett å la våre fantasi gå inn i hyperdrive og dryss animasjoner på omtrent alt. Mens animasjon kan være bra, må vi være forsiktige og alltid spørre oss selv: Er denne animasjonen meningsfylt? Er det å legge til en annen verdi enn å være vakker? Er det å gjøre vårt produkt enklere å bruke?

Meningsfylt animasjon

This is the starting point for the tutorial – the sample menu that we’ll reveal with an animation — Dette er utgangspunktet for opplæringen - prøvemenyen som vi skal avsløre med en animasjon

I denne artikkelen går vi med en felles UI Design Element: En menybryter. Vi skal lage menyen (og et ikon for å gå med det) med CSS, og få det til å bli levende med animasjoner. Vi vil sørge for at animasjonene er meningsfylte, men også påføre beste praksis for webutvikling for å sikre at de er så glatte som mulig.

Du kan Forhåndsvisning av sluttresultatet her . Når brukeren klikker på menyikonet, kan vi utvide ikonets bakgrunnsplate (en sirkel) for å dekke skjermen, og presentere menyenoverlegget.

I stedet for å bare blinke til et nært ikon, skal vi animere og morph de tre vertikale linjene (som utgjør menyikonet) i en 'x', for å representere et nært ikon. Med andre ord, som menyen, avsløres ikonet morphs i en tett-knapp.

Relaterte elementer

Du kan tenke 'så, er dette en meningsfylt animasjon?' Vel, flott spørsmål. Kort svar: Ja! Lengre svar: Animasjoner er flotte på å koble elementer på skjermen, og viser hvordan de relaterer seg til hverandre.

Når vi skal opp i menyens bakgrunnsplate for å bli menyen, viser vi hvordan de to er tilkoblet - ligner på hvordan et app-ikon, når du trykker på iOS eller Android, skaler opp og tar over skjermen, og viser at appen ble lansert fra det veldig ikonet. Vårt menyikon byttes ikke bare på menyen: det er menyen, bare kollapset.

På samme måte, akkurat som hvordan en på / av-veksle transformerer mellom dens på og av tilstanden når du trykker på den på iOS, vil menybryteren endres mellom et menyikon og et nært ikon avhengig av om nettstedets meny er synlig eller skjult. Dette bidrar til å håndheve ideen om at de to ikonene fungerer på lignende måter: de kontrollerer begge menyen.

Så mens vi gjør nettstedet mitt morsomt å bruke, gjør vi det også lettere å forstå, og forbedre Brukererfaring noensinne så litt.

Se hvordan du gjør dette i videoopplæringen ovenfor og skriftlige trinn nedenfor.

01. Kom i gang

By drawing the menu icon with CSS (and no images), we can easily animate it later — Ved å tegne menyikonet med CSS (og ingen bilder), kan vi enkelt animere det senere

Last ned prosjektfilene . Åpne opp index.html. I en nettleser og du bør se tre store lenker mot en hvit bakgrunn. Dette er menyen overlegget vi vil avsløre.

Først av alt må vi gjemme det. I Styles.css , legg til disse stilene til .Menu-overlay. :

 Opacity: 0;
Sikt: Skjult;

Med overlegget gått, skal en knapp vises i øverste venstre hjørne. La oss tegne vårt menyikon her, så det er noe å klikke på for å vise overlegget. For å gjøre det enkelt å animere, vil vi tegne det med bare HTML og CSS; ingen bitmaps eller vektorer. Vi har allerede fått litt html i index.html. For menyen: en beholder ( .Meny ), en bakgrunn ( .Menu-sirkelen ), en lenke ( .Menu-link ) og ikonet ( .Menu-ikon ) med ett span for hver linje.

Å ha en egen div. For bakgrunnen er en litt ukonvensjonell tilnærming. Hvis vi ikke var i ferd med å legge til animasjoner til denne sirkelen, ville vi ikke trenge en egen div. ; Vi kunne bare legge til en Border-Radius og bakgrunnsfarge til vår menyen-link .

Men vi vil være fri til å bruke forvandle Eiendom på sirkelen, så vi kan skalere den uten å påvirke selve ikonet, så vi må forkynne bakgrunnen fra ikonet.

La oss begynne å tegne linjene som utgjør ikonet. Hva har de alle til felles? De er like store, de har avrundede hjørner, er helt plassert, og de har en bakgrunnsfarge. Siden alle linjene deler Menylinje Klassen, la oss bruke den til å sette disse delte egenskapene:

 .Menu-line {
 Bakgrunnsfarge: # 333;
 Høyde: 2px;
 Bredde: 100%;
 Border-Radius: 2px;
 posisjon: absolutt;
 Venstre: 0;
}

Deretter kan vi bruke linjenees unike klasser for å sette den vertikale posisjonen:

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

.Menu-line-2 {
 Topp: 0;
 Bunn: 0;
 Margin: Auto;
}

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

02. Legg til en svinger effekt

To make the menu appear clickable, we inflate the background plate on hover — For å gjøre menyen vises klikkbar, blåsetter vi bakgrunnsplaten på svingeren

La oss gjøre ikonet tydelig klikkbart ved å legge til en svingereffekt. I Styles.css , opprett en ny velger for menyen-sirkel å skalere den opp når du svinger over menyen:

 .Menu: Hover .Menu-sirkel {transformasjon: skala (1.4); }

Nå kan vi legge til vår første animasjon. Legg til "Overgang: alle 0.2s lette inn-ut" til .Menu-sirkel {} (ikke til Hover-staten). Vi forteller nettleseren å animere alle eiendommer som kan endres for .Menu-sirkelen . Så når vi skalere den på svever, animeres det i løpet av 0,2 sekunder til sin nye tilstand, med en timing-funksjon av Lett-in-out .

Hvordan vet du hvilken timingfunksjon å velge? Først av alt, unngå å bruke en lineær timingfunksjon. Få ting i den virkelige verden beveger seg med en perfekt konstant hastighet, så gjenstander som er animert med en lineær timingfunksjon, har en tendens til å se unaturlig og stiv (som Einstein ville ha sagt, "Gud spiller ikke terninger med en lineær timingfunksjon").

Som en tommelregel, lette ut Fungerer bra for å presentere nye objekter, og lette inn Fungerer bra for å fjerne objekter. Og når du er i tvil, Lett-in-out Er en solid timing-funksjon som standard til: Den har en langsom begynnelse og en langsom slutt, og skaper en jevn og flytende animasjon.

03. Vis og skjul menyen

La oss bruke jquery å vise og skjule vår nyopprettede overlegg. I script.js. , bytt klassen av åpen på .Menu-overlay. Inne i den eksisterende klikkhåndtaket:

  $ (". Meny-overlay"). Toggleclass ("åpen");

Viser deretter overlegget når det har en klasse med åpen:

 .Menu-overlay.open {
 opasitet: 1;
 synlighet: synlig;
}

04. Koble menyikonet

Overgangen vi la til tidligere, betyr at vi allerede har en fin fade-effekt som skjer når vi viser og skjuler overlegget. Men vi kan få det til å se ut som menyikonets bakgrunn blir menyen overlegget, og bedre koble de to visuelt.

Å oppnå denne effekten er enklere enn det virker: alt vi trenger å gjøre er å raskt forstørre menykretsen når den klikkes. Overlegget vil falme samtidig, og skaper illusjonen om at menyikonet forvandler seg til overlegget.

Vi må kunne style menyen sirkel når menyen er klikket. Åpne opp script.js. , og i vår eksisterende klikk-funksjon veksler klassen åpen for vår .Meny :

  $ (". Meny"). Toggleclass ("åpen");

Nå kan vi målrette denne klassen med CSS og utvide sirkelen som menyen åpnes. På bunnen av Style.css , utvide den .Menu-sirkelen når .Meny har også en klasse av .åpen :

 .Menu.Poen .Menu-sirkel {transformasjon: skala (60);
}

05. Forvandle ikonet

The white circle expands to become the menu background, and the icon morphs into an 'X' — Den hvite sirkelen utvider seg for å bli menyen bakgrunn, og ikonet morphs i en 'x'

Vi har en vakker avslørende effekt for vår meny, men hvordan slår vi menyikonet til et nært ikon? Det er overraskende enkelt når du vet hvordan - vi trenger bare å sette tre CSS-egenskaper. Først må vi skjule midtlinjen mens menyen blir vist:

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

Så alt vi trenger å gjøre er å vende de andre to linjene 45 grader i motsatte retninger (linjene må peke i forskjellige retninger for å danne en "X", så merk hvordan en av linjene har en negativ rotasjon på 45 grader):

 .Menu.open .Menu-line-1 {
 Transform: Roter (-45DEG);
}

.Menu.open .Menu-line-3 {
 Transform: Roter (45deg);
}

Vel, slags. Vi må også sitte disse to linjene vertikalt. På dette punktet kan du tenke lett! Vi trenger bare å endre topp og bunn posisjon for å sentrere dem '. Og du ville være rett - hvis vi ikke var animere dette ikonet.

Siden vi bare kan oppnå maskinvare-akselererte animasjoner ved å begrense oss til å animere forvandle og opasitet Egenskaper, vi må ty til sentreringslinjene gjennom transformasjoner.

 .Menu.open .Menu-line-1 {
 transform: translatey (7px) translatey (-50%) roter (-45deg);
}

.Menu.open .Menu-line-3 {
 Transform: Translatey (-7px) Translatey (50%) Roter (45deg);
}

Disse transformasjonene vil bevege de to linjene slik at de er vertikalt sentrert i ikonbeholderen, og deretter roterer dem for å danne korset.

La oss bryte den ned. Vi har to oversettelser som brukes samtidig: translatey (7px) og translatey (-50%) . Den første transformasjonen, translatey (7px) , brukes til å flytte linjens toppkant til det vertikale sentrum av lerretet. Matematikkene her er enkelt: 14 er høyden på vårt ikon, ved å dele det med to, får vi midtpunktet: 7.

Den andre transformasjonen, translatey (-50%) , brukes til å flytte linjen slik at linjens vertikale senter, ikke dens toppkant, ligger på lerretets vertikale midtpunkt.

Vanligvis når du bruker % Logg inn CSS Du refererer til foreldrene til et element (innstilling Bredde: 100% Matcher elementets bredde til forelderen), men hvis du bruker prosenter med transformasjonsegenskapen, refererer du til elementet selv, ikke foreldrene. Så for oss å finne en linje høyde og flytte den oppover med halvparten av det, alt vi trenger translatey (-50%) .

06. Morph mellom ikoner

I stedet for å bare bytte menyikonet med det nære ikonet, la oss morph mellom de to statene.

Start med å legge til en overgang til .Menu-linje i Style.css :

 Overgang: Alle 0.25s Lett-in-out;

Ta-da! Et morphing-menyikon. Animasjonen er litt kjedelig, skjønt. La oss fikse det. For å gjøre linjene vises mer levende, kan vi rotere dem begge ytterligere 90 grader. Ikonet vil se det samme til slutt, men linjene vil reise videre i samme tidsperiode. Endre rotasjonene til Roter (-135DEG) og Roter (135DEG) .

Som en tommelfingerregel kan du alltid forbedre en animasjon ved å bruke en tilpasset bézier-kurve som er bedre tilpasset animasjonen din. Vi bruker for tiden Lett-in-out - Dette betyr at animasjonen vil ha en langsom start og slutt, med et raskere tempo i midten.

Jeg tror en mer vårlignende effekt er passende for vårt ikon. La oss få det til å snurre raskt, med en liten studseffekt som det kommer til en slutt. Til .Menu-linje , erstatte " lette inn-ut " med en tilpasset bézier-kurve:

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

Hva er alle disse tallene? Ikke bekymre deg: Bézier-kurver er sjelden skrevet for hånd. Du bruker Cubic-Bezier () For å definere tempoet på en animasjon over tid, og i stedet for å skrive dem på egen hånd, anbefaler jeg at du bruker et referanseside. Dette kommer fra Easings.Net. Det overshoots på slutten av animasjonen, og skaper en subtil sprettingseffekt.

Mens vi er på det, gå til Easings.Net. og ta koden for EaseOutExpo. . Vi bruker dette til å skape en mer raffinert effekt for menyen bakgrunnsanimasjon. Oppdater overgangen av .Menu-sirkelen Å bruke denne tilpassede Bézier-kurven, og gjør animasjonen litt lenger (0,5s):

 Overgang: Alle 0,5s kubikk-bezier (0,19, 1, 0,22, 1);

Gratulerer, du har opprettet et sett med animasjoner som er meningsfulle: de hjelper deg med å forstå hva som skjer på nettstedet mens du navigerer på det, og skaper en følelse av romlig bevissthet. På toppen av det løper animasjonene jevnt.

Ved å bare animere transformasjons- og opasitetsegenskapene, kan vi sørge for at nettleserens maskinvareakselerasjonstøtte kan sparke inn, og unngå unødvendig lag. Når du spiller rundt med animasjoner, må du sørge for at du krysser disse to boksene: Gjør dem meningsfylt og vakkert.

Denne artikkelen opprinnelig dukket opp i Net Magazine. utgave 281. Abonner på nettet her .

Relaterte artikler:

10 imponerende eksempler på CSS3 animasjon
28 fremragende eksempler på CSS
Kom i gang med webtilgjengelighet

Slå på menyene dine ved hjelp av animasjon med CSS

Meningsfylt animasjon

Relaterte elementer

01. Kom i gang

02. Legg til en svinger effekt

03. Vis og skjul menyen

04. Koble menyikonet

05. Forvandle ikonet

06. Morph mellom ikoner

hvordan - Mest populære artikler

Få mer fra Artrage 6: Topp tips for å øke arbeidsflyten

Jamstack: Bygg raskere, mer effektive nettsteder i dag

Hvordan legge til animasjon til SVG med CSS

Procreate Tutorial: Hvordan male som de gamle mestere

Hvordan lage stilisert spill Artwork

Oppgrader teksturene dine i stoffdesigner

Hvordan lage dine egne lerretskort

Hvordan tegne et landskap med pasteller

Kategorier