Einschalten Ihre Menüs mit Animation mit CSS

Sep 17, 2025

wie man

Durch die Animation, dass wir die Welt sinnvoll machen: Türen schwingen, Autos fahren zu ihren Zielen, Lippen kräuseln in ein Lächeln. Sogar die Dinge, die sich augenblicklich fühlen, wie der Blitz auffällig oder fallen ein Telefon auf Ihrem Gesicht, während er im Bett verwendet wird, passiert im Bett. Es ist durch diese Bewegung, dass wir verstehen, wie Objekte sich beziehen und funktionieren; Wenn sie leicht oder schwer, starr oder locker, verbunden oder getrennt, klebrig oder rutschig sind.

Im Internet haben wir jedoch an Dinge gewöhnt, die im Handumdrehen erscheinen und verschwinden. Wir klicken auf einen Link und alles ändert sich. Es ist, als würde man in einen Raum geführt werden, der mit verbundenen Augen verbunden wird, sich um einige Male dreht und die Augenbinde entnommen, um die Umgebung aufzunehmen. Sie wissen nicht einmal, welche Tür Sie durchgemacht haben. Dies ist ein und groß, wie die meisten Standorte errichtet werden. Wir können es besser machen.

Beim Lernen des Potenzials von CSS-Animation. , Es kann leicht sein, dass unsere Vorstellungen in Hyperdrive in Hyperdrive gehen lassen und Animationen auf fast alles streuen. Während die Animation großartig sein kann, müssen wir vorsichtig sein und uns immer fragen: Ist diese Animation sinnvoll? Fügt es einen anderen Wert hinzu, als schön zu sein? Macht es unser Produkt leichter zu verwenden?

Sinnvolle Animation

This is the starting point for the tutorial – the sample menu that we’ll reveal with an animation — Dies ist der Ausgangspunkt für das Tutorial - das Mustermenü, das wir mit einer Animation enthüllen werden

In diesem Artikel arbeiten wir mit einem gemeinsamen Arbeit Ui-Design Element: Ein Menü umschalten. Wir werden mit CSS das Menü (und ein Symbol zum Mitnehmen) erstellen und mit Animationen lebendig werden. Wir stellen sicher, dass die Animationen sinnvoll sind, sondern auch Web-Performance-Best-Praktiken anwenden, um sicherzustellen, dass sie so glatt wie möglich sind.

Sie können Vorschau Das Endergebnis hier . Wenn der Benutzer auf das Menüsymbol klickt, erweitern wir die Hintergrundplatte des Symbols (einen Kreis), um den Bildschirm abzudecken, und präsentieren Sie die Menüüberlagerung.

Anstatt nur zu einem engen Symbol zu blinken, werden wir die drei vertikalen Linien animieren und Morph (die das Menüsymbol ausmachen) in ein 'X', um ein engesones Symbol darzustellen. Mit anderen Worten, da das Menü die Symbol-Morphen in eine Close-Taste ergab.

01. Erste Schritte

By drawing the menu icon with CSS (and no images), we can easily animate it later — Durch Zeichnen des Menüsymbols mit CSS (und keinen Bildern) können wir es später problemlos animieren

Laden Sie die Projektdateien herunter . Aufmachen index.html. In einem Browser und Sie sollten drei große Verbindungen vor einem weißen Hintergrund sehen. Dies ist die Menüüberlagerung, die wir zeigen.

Zunächst müssen wir es verstecken. Im styles.css. , fügen Sie diese Styles hinzu .Menu-Overlay. :

 Deckkraft: 0;
Sichtbarkeit: versteckt;

Mit dem Überlagerung sollte in der oberen linken Ecke ein Knopf erscheinen. Lassen Sie uns unseren Menüsymbol hier ziehen, also ist etwas zu klicken, um das Overlay anzuzeigen. Um es leicht zu animieren, ziehen wir sie mit nur HTML und CSS an. Keine Bitmaps oder Vektoren. Wir haben bereits ein paar HTML in index.html. für das Menü: ein Container ( .Speisekarte ), ein Hintergrund ( .Menu-Kreis ), eine Verbindung ( .Menu-Link ) und das Symbol ( .Menu-Ikone. ) mit einer Spannweite für jede Zeile.

Eine separate haben div. Für den Hintergrund ist ein etwas unkonventioneller Ansatz. Wenn wir nicht dabei, diesem Kreis Animationen hinzuzufügen, brauchen wir keine separate div. ; Wir könnten einfach ein hinzufügen Randradius und Hintergrundfarbe zu unserem Menü-Link .

Wir möchten jedoch frei sein, um das einzusetzen verwandeln Eigentum auf dem Kreis, damit wir es skalieren können, ohne das Symbol selbst zu beeinträchtigen, so dass wir den Hintergrund aus dem Symbol entkoppeln müssen.

Beginnen wir mit dem Zeichnen der Zeilen, die das Symbol ausmachen. Was haben sie alle gemeinsam? Sie sind gleich weit, sie haben abgerundete Ecken, sind absolut positioniert, und sie haben eine Hintergrundfarbe. Da alle Linien das teilen Menülinie. Klasse, lasst uns verwenden, um diese gemeinsam genutzten Eigenschaften festzulegen:

 .Menu-Line {
 Hintergrundfarbe: # 333;
 Höhe: 2px;
 Breite: 100%;
 Borderradius: 2px;
 Position: absolut;
 links: 0;
}

Dann können wir die einzigartigen Klassen der Linien verwenden, um die vertikale Position einzustellen:

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

.Menu-line-2 {
 oben: 0;
 unten: 0;
 Marge: Auto;
}

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

02. Fügen Sie einen Lover-Effekt hinzu

To make the menu appear clickable, we inflate the background plate on hover — Um das Menü zu erstellen, klickfähig erscheint, füllen wir den Hintergrundplatten auf dem Hover auf

Lassen Sie uns das Symbol eindeutig anklicken, indem Sie einen Lover-Effekt hinzufügen. Im styles.css. , erstellen Sie einen neuen Selektor für Menükreis Um es zu skalieren, wenn Sie über das Menü schweben:

 .Menu: Hover. Meru-Kreis {Transformation: Skala (1.4); }

Jetzt können wir unsere erste Animation hinzufügen. Hinzufügen "Übergang: Alle 0,2s Ease-In-Out" zu .Menu-Circle {} (nicht zum Hover-Staat). Wir sagen dem Browser, um alle Eigenschaften anzuimieren, die sich ändern können .Menu-Kreis . Wenn wir es also auf dem Ruder hoch skalieren, ist es in ihrem neuen Zustand über den Kurs von 0,2 Sekunden mit einer Timing-Funktion von animiert unkompliziert .

Woher wissen Sie, welche Timing-Funktion wählen? Vermeiden Sie zunächst eine lineare Timing-Funktion. Nur wenige Dinge in der realen Welt bewegen sich in vollkommen konstanter Geschwindigkeit, sodass Objekte mit einer linearen Timing-Funktion animiert sind, neigen dazu, unnatürlich unnatürlich und steif auszusehen (als Einstein hätte gesagt, "Gott spielt keine Würfel mit einer linearen Timing-Funktion".

Als Faustregel gilt, Easy-Out arbeitet großartig, um neue Objekte zu präsentieren, und Einfache Funktioniert gut zum Entfernen von Objekten. Und wann im Zweifel unkompliziert ist eine solide Timing-Funktion, um den Standardwert zu standardmäßig zu verwenden: Es hat einen langsamen Anfang und ein langsames Ende, was eine reibungslose und flüssige Animation erzeugt.

03. Show und ausblenden das Menü

Lassen Sie uns jQuery verwenden, um unsere neu erstellte Overlay zu zeigen und zu verbergen. Im script.js. schalten Sie die Klasse von um öffnen auf .Menu-Overlay. Innerhalb des vorhandenen Click-Handlers:


    $ (". Menüüberlagerung"). TOGGLECLASS ("Open");

Zeigen Sie dann die Überlagerung, wenn es eine offene Klasse hat:

.Menu-Overlay.Open {
 Deckkraft: 1;
 Sichtbarkeit: sichtbar;
}

04. Verbinden Sie das Menüsymbol

Der Übergang, den wir früher hinzugefügt haben, bedeutet, dass wir bereits einen ordentlichen Fade-Effekt haben, wenn wir die Überlagerung zeigen und ausblenden. Wir können jedoch so aussehen, als ob der Menü-Symbolhintergrund zur Menüüberlagerung wird, und verbinden Sie die beiden besser.

Wenn Sie diesen Effekt erreichen, ist es einfacher, als es scheint: Alles, was wir tun müssen, ist, den Menükreis schnell zu vergrößern, wenn er geklickt wurde. Das Overlay verblasst gleichzeitig, wodurch die Illusion erstellt wird, dass das Menüsymbol in die Überlagerung umwandelt.

Wir müssen in der Lage sein, den Menükreis style zu stylen, wenn das Menü geklickt wurde. Aufmachen script.js. , und in unserer vorhandenen Klickfunktion wechselt die Klasse für unsere .Speisekarte :


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

Jetzt können wir diese Klasse mit CSS anrufen und den Kreis erweitern, da das Menü geöffnet ist. Am ganz unten von style.css. , erweitern Sie die .Menu-Kreis wann .Speisekarte hat auch eine Klasse von .öffnen :

 .Menu.Open .Menu-Kreis {Transformation: Skala (60);
}

05. Verwandeln Sie das Symbol

The white circle expands to become the menu background, and the icon morphs into an 'X' — Der weiße Kreis erweitert sich, um den Menühintergrund zu werden, und die Symbol verwandelt sich in ein 'X'

Wir haben einen schönen Eheet-Effekt für unseren Menü, aber wie drehen wir das Menüsymbol in eine enge Symbol? Es ist überraschend einfach, sobald Sie wissen, wie - wir müssen nur drei CSS-Eigenschaften einstellen. Zunächst müssen wir die mittlere Linie ausblenden, während das Menü angezeigt wird:

 .Menu.Open .Menu-Line-2 {Deckkraft: 0; }

Dann müssen wir alle in entgegengesetzte Richtungen auf die anderen beiden Linien 45 Grad 45 Grad umdrehen

 .Menu.Open .Menu-Line-1 {
 Transformation: Drehen (-45DEG);
}

.Menu.Open .Menu-Line-3 {
 Transformation: Drehen (45DEG);
}

Naja, so ungefähr. Wir müssen diese beiden Zeilen auch vertikal zentrieren. An diesem Punkt könnten Sie "einfach denken! Wir müssen nur das ändern oben und Unterseite Position, um sie zu zentrieren ". Und Sie wären richtig - wenn wir dieses Symbol nicht animieren würden.

Da wir nur hardwarebeschleunigte Animationen erreichen können, indem wir uns auf das Animieren der verwandeln und Opazität Eigenschaften, wir müssen die Ziffer der Linien durch Verwandlungen zurückgreifen.

.Menu.Open .Menu-Line-1 {
 transform: translatey (7px) translaty (-50%) dreht (-45DEG);
}

.Menu.Open .Menu-Line-3 {
 transform: translatey (-7px) translatey (50%) dreht (45 dig;
}

Diese Transformationen bewegen die beiden Leitungen, sodass sie senkrecht innerhalb des Symbolbehälters zentriert sind, und drehen sie dann, um das Kreuz zu bilden.

Lass es uns aufbrechen. Wir haben zwei Übersetzungen gleichzeitig verwendet: translaty (7px) und translaty (-50%) . Die erste transform, translaty (7px) , wird verwendet, um die Oberkante der Linie in die vertikale Mitte der Leinwand zu bewegen. Die Mathematik hier ist einfach: 14 ist die Höhe unseres Symbols, indem er sie durch zwei teilen, wir bekommen den mittleren Punkt: 7.

Die zweite Transformation, translaty (-50%) wird verwendet, um die Zeile zu bewegen, so dass die vertikale Mitte der Linie nicht seine obere Kante auf dem vertikalen Mittelpunkt der Leinwand besteht.

Normalerweise bei der Verwendung der % Anmelden CSS Sie beziehen sich auf den Elternteil eines Elements (Einstellung Breite: 100% entspricht der Breite des Elements zu dem ihrer Elternteil), aber wenn Sie Prozentsätze mit der Transformation-Eigenschaft verwenden, die Sie auf das Element selbst beziehen, nicht das Elternteil. Also für uns, um die Höhe einer Linie zu finden und um die Hälfte davon nach oben zu verschieben, ist alles, was wir brauchen, ist translaty (-50%) .

06. Morph zwischen Icons

Anstatt das Menüsymbol nur mit dem engen Symbol zu ersetzen, lassen Sie uns zwischen den beiden Zuständen verwandeln.

Beginnen Sie mit dem Hinzufügen eines Übergangs zu .Menu-Line. im style.css. :

 Übergang: Alle 0,25s Ease-In-Out;

TA-DA! Ein Morphing-Menü-Symbol. Die Animation ist jedoch etwas langweilig. Lass uns das beheben. Damit die Linien lebhafter erscheinen, können wir sie beide zusätzlich 90 Grad drehen. Das Symbol sieht am Ende gleich aus, aber die Linien reisen während derselben Zeitspanne weiter. Ändern Sie die Drehungen an Drehen (-135DEG) und drehen (135deg) .

Als Faustregel können Sie immer eine Animation verbessern, indem Sie eine benutzerdefinierte Bézier-Kurve verwenden, die besser an Ihre Animation angepasst ist. Wir verwenden derzeit unkompliziert - Dies bedeutet, dass die Animation einen langsamen Start und dem Ende hat, mit einem schnelleren Tempo in der Mitte.

Ich denke, ein mehr frühlingsartiger Effekt passt für unser Symbol. Lassen Sie es sich schnell drehen, mit einem kleinen Bounce-Effekt, da es um Ende geht. Zum .Menu-Line. , ersetzen " Ease-In-Out " Mit einer benutzerdefinierten Bézier-Kurve:

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

Was sind alle diese Zahlen? Keine Sorge: Bézier-Kurven werden selten von Hand geschrieben. Sie nutzen Cubic-Bezier () Um das Tempo einer Animation im Laufe der Zeit zu definieren und nicht selbst zu schreiben, empfehle ich, eine Referenzstelle zu verwenden. Dies stammt von Lockings.net. Es überschreitet am Ende der Animation und schafft einen subtilen Bounce-Effekt.

Während wir dabei sind, gehen Sie zu Lockings.net. und schnappen Sie sich den Code für EccaseXPO. . Wir werden diese verwenden, um einen raffinierteren Effekt für die Menühintergrundanimation zu erstellen. Aktualisieren Sie den Übergang von .Menu-Kreis Um diese benutzerdefinierte Bézier-Kurve zu verwenden, und machen Sie die Animation etwas länger (0,5s):

 Übergang: Alle 0,5s kubisch-Bezier (0,19, 1, 0,22, 1);

Herzlichen Glückwunsch, Sie haben eine Reihe von Animationen erstellt, die sinnvoll sind: Sie helfen Ihnen, zu verstehen, was auf der Website passiert, während Sie es navigieren, und schafft ein Gefühl des räumlichen Bewusstseins. Darüber hinaus laufen die Animationen reibungslos.

Wenn Sie nur die Eigenschaften der Transformations- und Deckkraft animieren, können wir sicherstellen, dass die Hardwarebeschleunigungs-Unterstützung des Browsers eintreten kann, und vermeiden Sie unnötige Verzögerungen. Wenn Sie mit Animationen herumspielen, stellen Sie sicher, dass Sie diese beiden Boxen ankreuzen: Machen Sie sie sinnvoll und schön.

Dieser Artikel erschien ursprünglich in Netzmagazin. Ausgabe 281. Abonnieren Sie hier das Netz .

Zum Thema passende Artikel:

10 eindrucksvolle Beispiele für CSS3-Animationen
28 herausragende Beispiele von CSS
Beginnen Sie mit der Web-Zugänglichkeit

Einschalten Ihre Menüs mit Animation mit CSS

Sinnvolle Animation

Verwandte Elemente

01. Erste Schritte

02. Fügen Sie einen Lover-Effekt hinzu

03. Show und ausblenden das Menü

04. Verbinden Sie das Menüsymbol

05. Verwandeln Sie das Symbol

06. Morph zwischen Icons

wie man - Die beliebtesten Artikel

Verwendung der Cloud-Speicherung als kreativ

Erstellen Sie ein AI-Powered-Chatbot

Sculpt Realistische Anatomie in Zbrush

Malen Sie eine Sci-Fi-Spieleinstellung in Photoshop

Lackgesteuerte und glatte Striche mit Sketchable

Wie erstellt man schnellere Websites

So nehmen Sie Ihr Vektor-Logo von 2D nach 3D

So erstellen Sie ein schönes Aquarell-Landschaftsmalerei

Kategorien