Accendi i tuoi menu usando l'animazione con CSS

Sep 16, 2025

Come si fa

È attraverso l'animazione che abbiamo senso del mondo: le porte si aprono, le auto guidano verso le loro destinazioni, le labbra si arricciano nei sorrisi. Anche le cose che si sentono istantanee, come il fulmine colpendo o cadendo un telefono sul tuo viso mentre lo usi a letto, capita nel tempo. È attraverso quel movimento che comprendiamo come gli oggetti si riferiscono e alla funzione; Se sono leggeri o pesanti, rigidi o larghi, collegati o separati, appiccicosi o scivolosi.

Sul web, tuttavia, ci siamo abituati alle cose che appaiono e scomparendo in un batter d'occhio. Cliccate su un link e tutto cambia. È come essere guidato in una stanza bendata, girando intorno a un paio di volte e rimuovendo la benda per affrontare i dintorni. Non sai nemmeno quale porta hai inserito. Questo è e grande come la maggior parte dei siti sono costruiti. Possiamo fare di meglio.

Quando si impara il potenziale di Animazione CSS. , Può essere facile lasciare che le nostre immaginazione entrino in iperdrive e cospargere di animazioni su tutto. Mentre l'animazione può essere ottima, dobbiamo stare attenti e chiedi sempre noi stessi: questa animazione è significativa? Sta aggiungendo alcun valore diverso da essere bello? È il nostro prodotto più facile da usare?

Animazione significativa

This is the starting point for the tutorial – the sample menu that we’ll reveal with an animation — Questo è il punto di partenza per il tutorial - il menu di esempio che riveleremo con un'animazione

In questo articolo stiamo andando a lavorare con un comune Design UI Elemento: un menu a levetta. Creereremo il menu (e un'icona per andare con esso) con CSS e fallo essere vivo con le animazioni. Assermeremo che le animazioni siano significative, ma applicano anche le migliori pratiche sulle prestazioni Web per garantire che siano il più liscia più liscia possibile.

Puoi Anteprima del risultato finale qui . Quando l'utente fa clic sull'icona del menu espanderemo la piastra di sfondo dell'icona (un cerchio) per coprire lo schermo e presentare la sovrapposizione del menu.

Piuttosto che lampeggiare a un'icona chiusa, analizzeremo e morph le tre linee verticali (che compongono l'icona del menu) in una "X", per rappresentare un'icona chiusa. In altre parole, poiché il menu viene rivelato l'icona Morphs in un pulsante chiuso.

Elementi correlati

Potresti pensare 'così, è un'animazione significativa? " Bene, grande domanda. Risposta breve: sì! Risposta più lunga: le animazioni sono grandi per collegare elementi sullo schermo e mostrando come si relazionano l'uno con l'altro.

Mentre consente di scalare la piastra di sfondo del menu per diventare il menu, mostriamo come sono collegati i due - simili a come un'icona dell'app, quando viene premuto su iOS o Android, ridimensiona e riprende lo schermo, mostrando che l'app è stata lanciata da quella stessa icona. La nostra icona del menu non solo disattiva il menu: è il menu, collasso solo.

Allo stesso modo, proprio come il modo in cui un interruttore On / Off trasforma tra il suo stato ON e OFF Quando lo premi su iOS, il nostro menu Toggle cambierà tra un'icona del menu e un'icona chiusa a seconda del menu del nostro sito sia visibile o nascosto. Questo aiuta a far rispettare l'idea che le due icone funzionino in modi simili: entrambi controllano il menu.

Quindi mentre stiamo facendo il nostro sito divertente da usare, stiamo anche rendendo più facile capire e migliorare il esperienza utente mai così leggermente.

Guarda come farlo nel tutorial video sopra e scritto i passaggi sottostanti.

01. Inizia

By drawing the menu icon with CSS (and no images), we can easily animate it later — Disegnando l'icona del menu con CSS (e nessuna immagine), possiamo facilmente animarla più tardi

Scarica i file del progetto . Aprire index.html. In un browser e dovresti vedere tre grandi link contro uno sfondo bianco. Questa è la sovrapposizione del menu che riveleremo.

Prima di tutto dobbiamo nasconderlo. Nel stili.css. , aggiungi questi stili a .MENU-Overlay. :

 Opacità: 0;
Visibilità: nascosta;

Con la sovrapposizione andata, un pulsante dovrebbe apparire nell'angolo in alto a sinistra. Disegniamo la nostra icona del menu qui, quindi c'è qualcosa da fare clic per mostrare la sovrapposizione. Per facilitare l'animazione, lo disegneremo usando solo HTML e CSS; Nessun bitmap o vettori. Abbiamo già un po 'di html in index.html. Per il menu: un contenitore ( .menù ), un sottofondo ( .Menu-Circle. ), un collegamento ( .menu-link. ) e l'icona ( .menu-icon. ) con una portata per ogni riga.

Avere un separato div. Per lo sfondo è un approccio alquanto non convenzionale. Se non stavamo per aggiungere animazioni a questo cerchio, non avremmo bisogno di un separato div. ; Potremmo semplicemente aggiungere un Border-Radius. e colore di sfondo al nostro menu-link. .

Tuttavia, vogliamo essere liberi di usare il trasformare Proprietà sul cerchio, quindi possiamo ridimensionarla senza influire sull'icona stessa, quindi abbiamo bisogno di disaccoppiare lo sfondo dall'icona.

Iniziamo a disegnare le linee che compongono l'icona. Cosa hanno tutti in comune? Sono ugualmente ampi, hanno angoli arrotondati, sono assolutamente posizionati, e hanno un colore di sfondo. Dal momento che tutte le linee condividono il menu-line. Classe, lo usiamo per impostare queste proprietà condivise:

 .menu-line {
 Sfondo-Color: # 333;
 Altezza: 2 px;
 Larghezza: 100%;
 Border-Radius: 2 px;
 Posizione: assoluto;
 a sinistra: 0;
}

Quindi possiamo usare le classi uniche delle linee per impostare la posizione verticale:

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

.MENU-LINE-2 {
 Top: 0;
 Fondo: 0;
 Margine: Auto;
}

.menu-line-3 {fondo: 0; }

02. Aggiungi un effetto Hover

To make the menu appear clickable, we inflate the background plate on hover — Per apportare il menu clickidabile, gonfiamo la piastra di sfondo su Hover

Facciamo l'icona chiaramente cliccabile aggiungendo un effetto movimentato. Nel stili.css. , crea un nuovo selettore per Menu-Circle. Per ridimensionare quando si passa il mouse sul menu:

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

Ora possiamo aggiungere la nostra prima animazione. Inserisci "Transizione: Tutto 0.2S Facile-in-out" per .Menu-Circle {} (non allo stato di volo). Stiamo dicendo al browser di animare tutte le proprietà che potrebbero cambiare .Menu-Circle. . Quindi, quando lo ridimuriamo su Hover, anima nel corso di 0,2 secondi al suo nuovo stato, con una funzione di temporizzazione di facilità in uscita .

Come fai a sapere quale funzione di temporizzazione scegliere? Prima di tutto, evitare di utilizzare una funzione di temporizzazione lineare. Poche cose nel mondo reale si muovono ad una velocità perfettamente costante, quindi gli oggetti animati con una funzione di tempistica lineare tendono a sembrare innaturali e rigidi (come avrebbe detto Einstein, "Dio non gioca dadi con una funzione di temporizzazione lineare").

Come regola generale, facile Funziona perfettamente per presentare nuovi oggetti, e facilità-in. Funziona perfettamente per rimozione di oggetti. E quando in dubbio, facilità in uscita È una solida funzione di temporizzazione per impostazione predefinita a: ha un inizio lento e un finale lento, creando un'animazione fluida e fluida.

03. Mostra e nascondi il menu

Usiamo jQuery per mostrare e nascondere la nostra sovrapposizione di nuova creazione. Nel script.js. , a disattivare la classe di Aperto su .MENU-Overlay. Dentro il clic dei clic esistente:

  $ (". Sovrapposizione di menu"). toggleclass ("Apri");

Quindi mostra la sovrapposizione quando ha una classe di aperta:

 .menu-overlay.open {
 Opacità: 1;
 Visibilità: visibile;
}

04. Collegare l'icona del menu

La transizione che abbiamo aggiunto in precedenza significa che abbiamo già un effetto negativo in corso quando mostriamo e nascondiamo la sovrapposizione. Tuttavia, possiamo farlo sembrare che lo sfondo dell'icona del menu diventa la sovrapposizione del menu, e meglio collegare i due visivamente.

Raggiungere questo effetto è più facile di quanto non sembri: tutto ciò che dobbiamo fare è ampliare rapidamente il cerchio del menu quando è cliccato. La sovrapposizione svanirà contemporaneamente, creando l'illusione che l'icona del menu si sta trasformando nella sovrapposizione.

Dobbiamo essere in grado di stilare il cerchio del menu quando è stato cliccato il menu. Aprire script.js. , e all'interno del nostro clic del clic esistenti a disattivare la classe aperta per il nostro .menù :

  $ (". Menu"). Togleclass ("Aperto");

Ora possiamo indirizzare questa classe con CSS ed espandere il cerchio mentre il menu è aperto. In fondo a style.csss. , espandere il .Menu-Circle. quando .menù ha anche una classe di .Aperto :

 .menu.open .menu-cerchio {trasformazione: scala (60);
}

05. Trasforma l'icona

The white circle expands to become the menu background, and the icon morphs into an 'X' — Il cerchio bianco si espande per diventare lo sfondo del menu e l'icona morphs in un 'x'

Abbiamo un bell'effetto rivelatori per il nostro menu, ma come attiriamo l'icona del menu in un'icona chiusa? È sorprendentemente facile una volta che sai come - avremo solo bisogno di impostare tre proprietà CSS. Prima di tutto, dobbiamo nascondere la linea centrale mentre viene visualizzato il menu:

 .menu.open .menu-line-2 {opacità: 0; }

Quindi tutto ciò che dobbiamo fare è capovolgere le altre due linee 45 gradi in direzioni opposte (le linee devono puntare in direzioni diverse per formare una "X", quindi nota come una delle linee ha una rotazione negativa di 45 gradi):

 .Menu.Open .menu-line-1 {
 Trasforma: ruotare (-45Deg);
}

.menu.open .menu-line-3 {
 Trasforma: ruotare (45DEG);
}

Bene, una specie di. Abbiamo anche bisogno di centrare queste due linee verticalmente. A questo punto potresti pensare 'facile! Abbiamo solo bisogno di cambiare il superiore e parte inferiore posizione per centrarli '. E avresti ragione - se non fossimo animando questa icona.

Dal momento che possiamo ottenere solo animazioni accelerate hardware limitandoci ad animare il trasformare e opacità Proprietà, dovremo ricorrere a centrare le linee attraverso le trasformazioni.

 .Menu.Open .menu-line-1 {
 Trasforma: Traduttore (7px) Traduttore (-50%) Ruota (-45Deg);
}

.menu.open .menu-line-3 {
 Trasforma: Traduttore (-7px) Traduttore (50%) Ruota (45Deg);
}

Queste trasformazioni spostano le due linee in modo che siano centrate verticalmente all'interno del contenitore dell'icona, quindi ruotarli per formare la croce.

Lo diamo giù. Abbiamo due traduzioni utilizzate contemporaneamente: Traduttore (7px) e Traduttore (-50%) . La prima trasformazione, Traduttore (7px) , è usato per spostare il bordo superiore della linea sul centro verticale della tela. La matematica qui è semplice: 14 è l'altezza della nostra icona, dividendola per due riceviamo il punto centrale: 7.

La seconda trasformazione, Traduttore (-50%) è usato per spostare la linea in modo che il centro verticale della linea, non sia il suo bordo superiore, risiede sul punto centrale verticale della tela.

Di solito quando si usa il % Accedi a CSS Ti riferisci al genitore di un elemento (impostazione Larghezza: 100% Abbina la larghezza dell'elemento a quella del suo genitore), ma se usi percentuali con la proprietà Trasforma che si riferisce all'elemento stesso, non al genitore. Quindi per noi trovare l'altezza di una linea e spostarlo verso l'alto della metà di questo, tutto ciò di cui abbiamo bisogno è Traduttore (-50%) .

06. Morph tra icone

Invece di sostituire solo l'icona del menu con l'icona chiusa, morph tra i due stati.

Inizia aggiungendo una transizione a .MENU-LINE. nel style.csss. :

 Transizione: tutte le 0,25 alle facilità in uscita;

Ta-da! Un'icona del menu di morphing. L'animazione è un po 'noiosa, però. Sistemiamolo. Per far apparire le linee più vivide, possiamo ruotarle sia di ulteriori 90 gradi. L'icona sarà la stessa alla fine, ma le linee viaggeranno ulteriormente durante lo stesso periodo di tempo. Cambia le rotazioni a Ruota (-135Deg) e ROTATE (135DEG) .

Come regola generale, puoi sempre migliorare un'animazione utilizzando una curva di Bézier personalizzata che è meglio adattata alla tua animazione. Attualmente stiamo usando facilità in uscita - Ciò significa che l'animazione avrà un avvio e un finale lento, con un ritmo più veloce nel mezzo.

Penso che un effetto più simile a primavera sia adatto per la nostra icona. Facciamo girare velocemente, con un piccolo effetto di rimbalzo in quanto si termina. Per .MENU-LINE. , Sostituisci " Facile-in-out " Con una curva di Bézier personalizzata:

 Transizione: tutto 0,25s cubic-beziet (0,175, 0,885, 0,32, 1.275);

Quali sono tutti quei numeri? Non preoccuparti: le curve di Bézier sono raramente scritte a mano. Usate Cubic-Bezier () Per definire il ritmo di un'animazione nel tempo, e piuttosto che scriverli da soli, consiglio di utilizzare un sito di riferimento. Questo proviene da Eagsings.net. Oltre supera la fine dell'animazione e crea un sottile effetto di rimbalzo.

Mentre ci siamo, vai a Eagsings.net. e prendi il codice per liayoutoxpo. . Lo useremo per creare un effetto più raffinato per l'animazione di sfondo del menu. Aggiorna la transizione di .Menu-Circle. Per utilizzare questa curva Bézier personalizzata e rendere l'animazione un po 'più lunga (0,5s):

 Transizione: tutti 0,5s cubic-beziet (0,19, 1, 0,22, 1);

Congratulazioni, hai creato un insieme di animazioni che sono significative: ti aiutano a capire cosa sta succedendo sul sito mentre la naviga, creando un senso di consapevolezza spaziale. Inoltre, le animazioni corrono senza intoppi.

Animazione solo delle proprietà di trasformazione e opacità, possiamo assicurarci che il supporto dell'accelerazione hardware del browser possa dare un calcio ed evitare il ritardo inutile. Quando giochi con animazioni, assicurati di selezionare queste due caselle: renderli significativi e belli.

Questo articolo è originariamente apparso in Magazine netta Edizione 281. Iscriviti alla rete qui .

Articoli Correlati:

10 esempi impressionanti di animazione CSS3
28 esempi eccezionali di CSS
Inizia con l'accessibilità web

Accendi i tuoi menu usando l'animazione con CSS

Animazione significativa

Elementi correlati

01. Inizia

02. Aggiungi un effetto Hover

03. Mostra e nascondi il menu

04. Collegare l'icona del menu

05. Trasforma l'icona

06. Morph tra icone

Come si fa - Articoli più popolari

Come modificare un video su Tiktok

Come creare un'icona di app in Illustrator

Crea nuvole con FUMFX per 3DS MAX

Come creare un mandelbo

Crea un semplice grafico a colori

Crea migliori animazioni del personaggio in Maya

Come dipingere una tradizionale scena del villaggio britannica

Fai un composito in Photoshop

Categorie