Verschönern Sie Ihre Website mit diesen Animationstipps und -tricks.
Animationen und Übergänge sind ein wichtiger Bestandteil des Webdesigns. Das Hinzufügen subtiler Animationen zu Ihrer Webseite macht sie ansprechender. Einfache Animationen wie animierte Symbole, kinetische Typografie und animierte Logos können dazu beitragen, das Benutzererlebnis zu verbessern. Lernen Sie fünf tolle Animationstricks kennen, die Ihnen dabei helfen können, Ihre Website zu beleben.
1. Transformieren eines Elements beim Schweben
Eine gängige Designpraxis besteht darin, ein Element zu verwenden, das sich bei Interaktion vergrößert. Beispielsweise möchten Sie die Schaltflächen möglicherweise ein wenig nach oben verschieben, wenn jemand mit der Maus darüber fährt. Dies können Sie mit dem CSS erreichen verwandeln Eigentum.
Vorausgesetzt, Sie haben eine Schaltfläche:
<Taste>
Klick mich
Taste>
Sie haben den Hauptteil des Dokuments sowie die Schaltfläche gestaltet:
/* Richtet die Schaltfläche in der Mitte der Seite aus */
Körper {
Anzeige: biegen;
Höhe: 100vh;
align-items: Center;
Rechtfertigungsinhalt: Center;
Hintergrundfarbe: Schwarz;
}/* Gestaltet die Schaltfläche */
Taste {
Polsterung: 1em 2em;
Hintergrund: Blau;
Grenze: 0;
Farbe: Weiss;
Grenzradius: 0.25rem;
Mauszeiger: Zeiger;
Schriftgröße: 2rem;
Übergang: verwandeln 500MS;
}
/* Hover-Zustände */
Taste:schweben,
Taste:Fokus {
verwandeln: übersetzenY(0.75rem) 500MS;
}
Mit dem letzten Block legen Sie Hover- und Fokuszustände für die Schaltfläche fest. In beiden Zuständen verschieben Sie die Schaltfläche entlang der Y-Achse um 0,75rem. Die Schaltfläche würde so aussehen:
Wenn Sie mit der Maus über die Schaltfläche fahren, bewegt sie sich nach oben. Der Übergang dauert eine halbe Sekunde (500 ms). Dabei handelt es sich um ein Muster, das Sie nicht nur auf Ihren Schaltflächen, sondern auch auf anderen Elementen (z. B. Bildern) implementieren können.
2. Deklarieren mehrerer Keyframes mit einer Deklaration
Ein weiteres häufiges Muster in CSS-Animationen ist das mehrfache Durchlaufen desselben Werts. Dies kann eine bestimmte Farbe, Größe oder Ausrichtung sein. Sie können dies mithilfe von erreichen CSS-Keyframe-Animationen durch die Deklaration mehrerer Keyframes mit einer Deklaration.
Betrachten Sie die Schaltfläche, die Sie im vorherigen Abschnitt erstellt haben. Möglicherweise möchten Sie mehrere Hintergrundfarben durchlaufen, wenn Sie auf die Schaltfläche klicken. Sie möchten aber auch in verschiedenen Phasen der Animation dieselbe Farbe verwenden. Mal sehen, wie man das im Code erreicht.
Zunächst möchten Sie die Schaltfläche nur dann animieren, wenn darauf geklickt wird. Sie würden also eine erstellen script.js Datei, in der Sie auf die Schaltfläche zugreifen und eine Klasse auf der Schaltfläche umschalten, wenn darauf geklickt wird:
const Taste = dokumentieren.querySelector("Taste")
button.addEventListener("klicken", (e) => {
button.classList.toggle('Party Zeit')
})
Wir haben querySelector verwendet, um von der Webseite aus auf die Schaltfläche zuzugreifen. Um mehr über DOM-Traversal zu erfahren, lesen Sie unseren Beitrag auf wie man das DOM mit JavaScript durchquert.
Der Party Zeit Die Klasse aktiviert eine Animation mit dem Titel Party:
.Party Zeit {
Animation: Party 2000MSunendlich;
}
Für die Animation möchten Sie mit Rot beginnen und bei 25 % zu Gelb übergehen. Dann kehren Sie bei 50 % zu Rot zurück, bevor Sie bei 75 % wieder zu Gelb übergehen. Schließlich würden Sie sich bei 100 % mit einer dunkelblauen Farbe zufrieden geben:
@keyframes Party {
0%, 50% {
Hintergrundfarbe: Rot;
}
25%, 75% {
Hintergrundfarbe: Gelb;
}
100% {
Hintergrundfarbe: hsl(200, 72%, 35%);
}
}
Dieser Ansatz ist sehr nützlich, um zwischen Farben auf einem farbbasierten Hintergrund zu wechseln. Da Sie mehrere Keyframes in einer Variablen wiederholen können, ist es ganz einfach, dieselbe Eigenschaft in verschiedenen Phasen Ihrer Animation zu verwenden.
3. Verwenden von @property zum Animieren benutzerdefinierter Eigenschaften
Wie Sie vielleicht bereits wissen, sind nicht alle Eigenschaften in CSS animierbar. Das offizielle Mozilla-Dokumentation führt eine aktualisierte Aufzeichnung aller animierbaren CSS-Eigenschaften. Wenn Sie eine nicht animierbare Eigenschaft animieren möchten, ist die Verwendung von die beste Lösung @Eigentum Richtlinie.
Ändern Sie zunächst die Hintergrundfarbe Ihrer Schaltfläche in einen linearen Farbverlauf:
Taste {
// andereCSS
Hintergrund: linearer Gradient(90Grad, Blau, Grün);
// andereCSS
}
Hier ist die Ausgabe:
Oft möchten Sie den Farbverlauf auf der Schaltfläche animieren. Es gibt zwar Tricks, mit denen Sie Ihren Farbverlauf verschieben können, Sie können ihn jedoch nicht wirklich animieren. Das ist weil Hintergrund (ebenso gut wie Hintergrundbild) ist keine animierbare Eigenschaft. Das ist wo @Eigentum kommt herein.
Der @Eigentum Mit der Direktive können Sie benutzerdefinierte Eigenschaften registrieren. Wenn Sie verwenden @Eigentum, müssen Sie es mit drei Werten versehen, nämlich Syntax, erbt, Und Ursprünglicher Wert:
@Eigentum --Farbe-1 {
Syntax: "<Farbe>";
erbt: WAHR;
Ursprünglicher Wert: Rot;
}
@Eigentum --Farbe-2 {
Syntax: "<Farbe>";
erbt: WAHR;
Ursprünglicher Wert: Blau;
}
Die erste ist die Starteigenschaft, während die zweite die Zieleigenschaft ist. Anstatt nun ein Hintergrundbild zu überführen (das Sie nicht überführen können), würden Sie jetzt von einem Bild übergehen --color-1 Zu --color-2 (Ihre benutzerdefinierten Eigenschaften) in einer Sekunde:
Taste {
Übergang: --color-1 1000MS, --color-2 1000MS;
}
Diese Technik ist hilfreich, da Sie auch andere Anpassungen hinzufügen können. Sie fügen beispielsweise eine Verzögerung hinzu, um ein flüssigeres Erlebnis zu ermöglichen. Die Möglichkeiten sind endlos.
4. Verwendung negativer Animationsverzögerungen
Animationsverzögerungen sind entscheidend für die Erstellung reibungsloser Animationen. Sehen wir uns ein Beispiel dafür in Aktion an. Fügen Sie in diesem Teil a hinzu div Element mit 15 Punkten oben auf der Schaltfläche:
<divKlasse=„Punkte“>
<divKlasse="Punkt">div>
<divKlasse="Punkt">div>
<divKlasse="Punkt">div>
<divKlasse="Punkt">div>
<divKlasse="Punkt">div>
<divKlasse="Punkt">div>
<divKlasse="Punkt">div>
<divKlasse="Punkt">div>
<divKlasse="Punkt">div>
<divKlasse="Punkt">div>
<divKlasse="Punkt">div>
<divKlasse="Punkt">div>
<divKlasse="Punkt">div>
<divKlasse="Punkt">div>
<divKlasse="Punkt">div>
div>
Hier sind einige grundlegende Stile, um jedes Kind zu verwandeln div in einen Punkt:
.Punkte {
Anzeige: biegen;
Lücke: .5rem;
Rand unten: 20px;
}
.Punkt {
Breite: 10px;
Seitenverhältnis: 1;
Hintergrundfarbe: Rot;
Grenzradius: 50%;
}
Hier verwenden wir Flexbox, um die Punkte in einer horizontalen Linie zu platzieren. Um tief in Flexbox einzutauchen, können Sie sich unsere ansehen CSS-Flexbox-Tutorial.
Innen script.js, fügen Sie den Code hinzu, der die Animation der Punkte auslöst. Du schaltest um tanzen Klasse auf den Punkt gebracht:
button.addEventListener("klicken", (e) => {
button.classList.toggle('Party Zeit')
// Neuer Code
dots.forEach((Punkt) => {
dot.classList.toggle('tanzen')
})
})
Der Tanzkurs aktiviert eine Animation mit dem Titel erheben:
.Punkt.tanzen {
Animation: erheben 2000MSunendlichwechseln;
}Für die Animation verschieben Sie einfach die Punkte um -100 Pixel entlang der Y-Achse:
@keyframes erheben {
100% {
verwandeln: übersetzenY(-100px)
}
}Jetzt ist es an der Zeit, etwas Interessantes zu tun. Anstatt dass die Punkte gleichzeitig ansteigen, möchten Sie die Punkte so animieren, dass sie wie eine Welle fließen. Um dies zu erreichen, müssen Sie hinzufügen Animationsverzögerung zu den Punkten und erhöhen Sie jeden Punkt um 100 ms:
.Punkt:ntes-Kind (1) {
Animationsverzögerung: 100MS;
}
.Punkt:ntes-Kind (2) {
Animationsverzögerung: 200MS;
}
.Punkt:ntes-Kind (3) {
Animationsverzögerung: 300MS;
}
.Punkt:ntes-Kind (4) {
Animationsverzögerung: 400MS;
}
/* Mach weiter, bis du den 15. Punkt erreichst */
Dadurch entsteht eine elegante Animation, bei der sich die Punkte wellenförmig auf und ab bewegen. Das folgende Bild zeigt die Punkte in der Mitte der Animation:
Bedenken Sie, dass dies problematisch sein kann, was uns zum fünften Tipp bringt.
5. Verwenden Sie „preferences-reduced-motion“, um die Einstellungen zu aktivieren
Denken Sie immer daran, dass viele Leute keine bewegungsbasierten Animationen mögen. Tatsächlich verfügen die meisten Benutzer über Einstellungen im Browser, mit denen sie die Bewegung deaktivieren können. Bewegung kann die Sinne ablenken und in schweren Fällen zu Übelkeit führen.
Glücklicherweise können Sie dies leicht beheben, indem Sie Ihre Animation in eine Datei einbinden keine Präferenz Medienabfrage etwa so:
@Medien(prefers-reduced-motion: no-preference) {
.Punkt.tanzen {
Animation: erheben 2000MSunendlichwechseln;
}
}Nun, wenn Sie es aktivieren würden bevorzugt reduzierte Bewegung in Ihrem Browser, dann würde die Animation nicht ausgeführt werden.
Erfahren Sie mehr über CSS-Tipps und Tricks
CSS steckt voller toller Hacks, die über Animationen und Übergänge hinausgehen. Es gibt beispielsweise Tipps und Tricks, wie Sie Ihr gesamtes Layout schlank und reaktionsfähig gestalten können. Die Vorgehensweisen können Ihnen dabei helfen, Ihre Website ansprechender, zugänglicher und angenehmer zu gestalten. Wenn Sie ein Prozent der besten CSS-Entwickler sein wollen, ist es sehr hilfreich, ein paar Tricks im Ärmel zu haben.