Slå på dina menyer med animering med CSS

Det är genom animering att vi gör världens känsla: dörrarna svänger öppna, bilar kör till sina destinationer, läppar curl i leenden. Även de saker som känner sig momentana, som blixten slår eller släpper en telefon på ditt ansikte medan du använder den i sängen, hända över tiden. Det är genom den rörelsen att vi förstår hur objekt relaterar och fungerar Om de är lätta eller tunga, styva eller lösa, anslutna eller separata, klibbiga eller hala.

På nätet har vi dock vana vid saker som visas och försvinner i ögonkontakt. Vi klickar på en länk och allt ändras. Det är som att ledas in i ett rum som är blindfoldat, spinning runt några gånger och tar bort blindfolden för att ta i omgivningen. Du vet inte ens vilken dörr du gick igenom. Detta är i stort sett hur de flesta webbplatser är byggda. Vi kan göra bättre.

När man lär sig om potentialen i CSS-animering , Det kan vara lätt att låta våra fantasier gå in i hyperdrive och ströa animationer på nästan allting. Medan animering kan vara bra måste vi vara försiktiga och fråga oss alltid: är den här animationen meningsfull? Lägger det till något annat värde än att vara vackert? Gör det med vår produkt lättare att använda?

Meningsfull animering

I den här artikeln går vi med ett gemensamt Ui design Element: En meny växla. Vi ska skapa menyn (och en ikon för att gå med den) med CSS, och få det att leva med animeringar. Vi ska se till att animationerna är meningsfulla, men också tillämpa webbprestanda bästa praxis för att de är så smidiga som möjligt.

Du kan Förhandsgranska slutresultatet här . När användaren klickar på menyikonen ska vi expandera ikonens bakgrundsplatta (en cirkel) för att täcka skärmen och presentera menyöverlaget.

I stället för att bara blinka till en nära ikon, kommer vi att animera och morf de tre vertikala linjerna (som utgör menyikonen) i en "X", för att representera en nära ikon. Med andra ord, som menyn avslöjas ikonen morphs i en nära knapp.

Relaterade element

Du kanske tänker "Så är det här en meningsfull animering?" Tja, bra fråga. Kort svar: Ja! Längre svar: Animationer är bra på anslutande element på skärmen och visar hur de relaterar till varandra.

När vi skala upp menyns bakgrundsplatta för att bli menyn visar vi hur de två är anslutna - som liknar hur en appikon, när du trycker på iOS eller android, skala upp och tar över skärmen, vilket visar att appen lanserades från den mycket ikonen. Vår menyikon växlar inte bara på menyn: det är menyn, bara kollapsade.

På samma sätt, precis som hur en på / av-växla omvandlar mellan sitt på och av tillstånd när du trycker på den på iOS, kommer vår menyväxling att byta mellan en menyikon och en nära ikon beroende på om vår webbplatss meny är synlig eller dold. Detta hjälper till att tillämpa tanken att de två ikonerna fungerar på liknande sätt: de båda kontrollerar menyn.

Så medan vi gör vår webbplats kul att använda, gör vi det också lättare att förstå, och förbättra användarupplevelse någonsin så lite.

Se hur du gör det i videoklippet ovanför och skrivna steg nedan.

01. Kom igång

Ladda ner projektfilerna . Öppna index.html I en webbläsare och du bör se tre stora länkar mot en vit bakgrund. Detta är menynöverlägg kommer vi att avslöja.

Först och främst måste vi gömma det. I stilar.css , lägg till dessa stilar till .MENU-överlagring :

 Opacitet: 0;
Synlighet: Dold; 

Med överlagret är en knapp att visas i det övre vänstra hörnet. Låt oss dra vår menyikon här, så det är något att klicka på för att visa överlägget. För att göra det enkelt att animera, drar vi det med bara HTML och CSS; Inga bitmappar eller vektorer. Vi har redan fått några html i index.html För menyn: en behållare ( .meny ), en bakgrund ( MENNA-CIRCLE ), en länk ( .menu-länk ) och ikonen ( ikon ) med en spänning för varje rad.

Ha en separat div För bakgrunden är ett något okonventionellt tillvägagångssätt. Om vi ​​inte skulle lägga till animationer i den här cirkeln, skulle vi inte behöva en separat div ; Vi kunde bara lägga till en gränsradie och bakgrundsfärg till vår menyslänk .

Men vi vill vara fria att använda omvandla Fastighet på cirkeln, så vi kan skala den utan att påverka ikonen själv, så vi måste koppla bort bakgrunden från ikonen.

Låt oss börja rita de linjer som utgör ikonen. Vad har de alla gemensamt? De är lika breda, de har avrundade hörn, är helt placerade, och de har en bakgrundsfärg. Eftersom alla linjer delar meny-linje Klass, låt oss använda den för att ställa in dessa delade egenskaper:

 .MENU-LINE {
 Bakgrundsfärg: # 333;
 Höjd: 2px;
 Bredd: 100%;
 Border-Radius: 2px;
 position: absolut;
 Vänster: 0;
} 

Då kan vi använda linjens unika klasser för att ställa in det vertikala läget:

 .MENU-LINE-1 {TOP: 0; }

.MENU-LINE-2 {
 Topp: 0;
 botten: 0;
 Marginal: Auto;
}

.MENU-LINE-3 {BOTTOM: 0; } 

02. Lägg till en svängningseffekt

Låt oss göra ikonen klart klickbar genom att lägga till en svängningseffekt. I stilar.css , skapa en ny väljare för menygcirkel Att skala upp det när du svänger över menyn:

 .Menu: Hover .Menu-Circle {Transform: Skala (1.4); } 

Nu kan vi lägga till vår första animering. Lägg till "Övergång: Alla 0.2s lätta in-out" till .Menu-circle {} (inte till Hover-staten). Vi berättar webbläsaren att animera alla egenskaper som kan förändras för MENNA-CIRCLE . Så när vi skider upp på svängen, animerar den under 0,2 sekunder till sitt nya tillstånd, med en tidsfunktion av lätt inredning .

Hur vet du vilken tidsfunktion som ska väljas? Först och främst, undvik att använda en linjär tidsfunktion. Få saker i den verkliga världen rör sig med en perfekt konstant hastighet, så objekt som är animerade med en linjär tidpunkt tenderar att se onaturlig och styv (som Einstein skulle ha sagt, "Gud spelar inte tärningar med en linjär tidsfunktion").

Tumregel, lätta fungerar bra för att presentera nya objekt, och lätta Fungerar bra för att ta bort objekt. Och när du är i tvivel, lätt inredning är en solid timing-funktion som är standard till: den har en långsam början och en långsam avslutning, vilket skapar en jämn och flytande animering.

03. Visa och dölja menyn

Låt oss använda jquery för att visa och dölja vår nyskapade överlagring. I script.js , Växla klassen av öppen på .MENU-överlagring Inuti den befintliga klickhanteraren:

  $ (". menyöverlag"). Toggleclass ("öppen"); 

Visa sedan överlägget när den har en klass av öppen:

 .Menu-overay.open {
 Opacitet: 1;
 Synlighet: synlig;
} 

04. Anslut menyikonen

Övergången vi tillade tidigare innebär att vi redan har en snygg blek effekt på när vi visar och döljer överlägget. Men vi kan göra det ser ut som menyikonbakgrunden blir menyöverlägget och bättre ansluta de två visuellt.

Att uppnå denna effekt är lättare än det verkar: allt vi behöver göra är att snabbt förstora menycirkeln när den är klickad. Överlägget kommer att blekna samtidigt, vilket skapar illusionen att menyikonen omvandlas till överlägget.

Vi måste kunna ställa menyns cirkel när menyn har klickats. Öppna script.js , och inuti vår befintliga klickfunktion växlar klassen öppen för vår .meny :

  $ (". MENU"). TOGGLECLASS ("OPEN"); 

Nu kan vi rikta in den här klassen med CSS och expandera cirkeln eftersom menyn öppnas. Längst ner i style.css , expandera MENNA-CIRCLE när .meny har också en klass av .öppen :

 .Menu.open .Menu-circle {Transform: Skala (60);
} 

05. Förvandla ikonen

Vi har en vacker avslöjande effekt för vår meny, men hur vänder vi menyikonen till en nära ikon? Det är förvånansvärt enkelt när du vet hur - vi behöver bara ställa in tre CSS-egenskaper. Först måste vi gömma mittlinjen medan menyn visas:

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

Då är allt vi behöver göra flip de andra två raderna 45 grader i motsatta riktningar (linjerna måste peka i olika riktningar för att bilda en "x", så notera hur en av linjerna har en negativ rotation av 45 grader):

 .Menu.Pen .Menu-line-1 {
 Transform: Rotera (-45deg);
}

.Menu.Open .Menu-line-3 {
 Transform: Rotera (45deg);
} 

Typ. Vi måste också centrera dessa två linjer vertikalt. Vid denna tidpunkt kan du tänka "lätt! Vi behöver bara ändra topp och botten position att centrera dem ". Och du skulle vara rätt - om vi inte animerade den här ikonen.

Eftersom vi bara kan uppnå hårdvara-accelererade animationer genom att begränsa oss själva för att animera omvandla och opacitet Egenskaper, vi måste tillgripa att centrera linjerna genom omvandlingar.

 .Menu.Pen .Menu-line-1 {
 Transform: Översätt (7px) Översätt (-50%) Rotera (-45DEG);
}

.Menu.Open .Menu-line-3 {
 Transform: Översätt (-7PX) Översätt (50%) Rotera (45deg);
} 

Dessa transformationer kommer att flytta de två linjerna så att de är vertikalt centrerade i ikonbehållaren och rotera dem sedan för att bilda korset.

Låt oss bryta ner det. Vi har två översättningar som används samtidigt: Översätt (7px) och Översätt (-50%) . Den första omvandlingen, Översätt (7px) , används för att flytta linjens övre kant till det vertikala mitten av duken. Matematiket här är enkel: 14 är höjden på vår ikon, genom att dela den med två får vi mittpunkten: 7.

Den andra transformen, Översätt (-50%) , används för att flytta linjen så att linjens vertikala centrum, inte dess övre kant, ligger på den vertikala mittpunkten på duken.

Vanligtvis när du använder % Logga in CSS Du hänvisar till förälder till ett element (inställning Bredd: 100% Matchar elementets bredd till dess förälder), men om du använder procentsatser med den transformerade egendomen hänvisar du till själva elementet, inte föräldern. Så för oss att hitta en rad höjd och flytta den uppåt med hälften av det, allt vi behöver är Översätt (-50%) .

06. Morph mellan ikoner

Istället för att bara byta menyikonen med den närmaste ikonen, låt oss morph mellan de två staterna.

Börja med att lägga till en övergång till .menu-line i style.css :

 Övergång: Alla 0,25s lätta in-out; 

TA-DA! En morphing menyikon. Animationen är dock lite tråkig. Låt oss fixa det. För att göra linjerna verkar mer levande kan vi rotera dem både ytterligare 90 grader. Ikonen kommer att se samma i slutet, men linjerna kommer att resa längre under samma tidsperiod. Ändra rotationerna till Rotera (-135deg) och Rotera (135deg) .

Som en tumregel kan du alltid förbättra en animering med hjälp av en anpassad Bézier-kurva som är bättre anpassad till din animering. Vi använder för närvarande lätt inredning - Det betyder att animationen kommer att ha en långsam start och slutar, med en snabbare takt i mitten.

Jag tror att en mer vårliknande effekt passar för vår ikon. Låt oss få det att spinna snabbt, med en liten studseffekt som det kommer till ett slut. För .menu-line , byta ut " lätta in-out " Med en anpassad Bézier-kurva:

 Övergång: Alla 0,25 kubik-bezier (0,175, 0,885, 0,32, 1,275); 

Vad är alla dessa nummer? Oroa dig inte: Bézier-kurvor skrivs sällan för hand. Du använder Cubic-Bezier () För att definiera takten i en animering över tiden, och istället för att skriva dem på egen hand, rekommenderar jag att du använder en referensplats. Detta kommer från Easings.net. Det överskrider i slutet av animationen och skapar en subtil studseffekt.

Medan vi är på det, gå till easings.net och ta tag i koden för EaseOutExpo . Vi använder detta för att skapa en mer raffinerad effekt för menyn Bakgrundsanimering. Uppdatera övergången av MENNA-CIRCLE Att använda den här anpassade Bézier-kurvan och gör animationen lite längre (0,5-tal):

 Övergång: Alla 0,5-tums kubik-bezier (0,19, 1, 0,22, 1); 

Grattis, du har skapat en uppsättning animationer som är meningsfulla: de hjälper dig att förstå vad som händer på webbplatsen medan du navigerar, vilket skapar en känsla av rumslig medvetenhet. Utöver det, kör animationerna smidigt.

Genom att bara animera transformations- och opacitetsegenskaperna kan vi se till att webbläsarens hårdvaruaccelerationsstöd kan sparka in och undvika onödig fördröjning. När du spelar med animeringar, se till att du markerar dessa två lådor: gör dem meningsfulla och vackra.

Denna artikel uppträdde ursprungligen i nätmagasin Utgåva 281. Prenumerera på nätet här .

Relaterade artiklar:

• 10 Imponerande exempel på CSS3-animering
• 28 Utestående exempel på CSS
• Kom igång med webbtillgänglighet