Animierte Icons

Mit diesem Styling-Toolkit können Sie die Größe, Drehung und Stapelung von Symbolen ganz einfach anpassen, sodass Sie Ihre Site mit Animationen zum Leben erwecken können.

Font Awesome erläutert die Grundlagen von Animationen wie Beat, Fade, Beat-Fade, Flip und Spin für Ihre Symbole, damit Sie auf Ihrer Site mehr visuelles Interesse wecken können.

Beat

Verwenden Sie die fa-beat Animation, um ein Symbol zu vergrößern oder zu verkleinern. Dies ist nützlich, um Aufmerksamkeit zu erregen oder für die Verwendung mit Symbolen zum Thema Gesundheit/Herz.

<div class="fa-3x">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart fa-beat"></i>
<i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s;"></i>
<i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 2s;"></i>
<i class="fa-solid fa-heart fa-beat" style="--fa-beat-scale: 2.0;"></i>
</div>

Beat - Dienstprogramm
Dienstprogramm	Beschreibung
`--fa-beat-scale`	Maximalen Wert für die Skalierung eines Symbols festlegen

Fade

Verwenden Sie die fa-fade Animation, um ein Symbol optisch ein- und auszublenden und so auf subtile (oder nicht so subtile) Weise Aufmerksamkeit zu erregen.

<div class="fa-3x">
<i class="fa-solid fa-triangle-exclamation fa-fade"></i>
<i class="fa-solid fa-skull-crossbones fa-fade"></i>
<i class="fa-solid fa-desktop-arrow-down fa-fade"></i>
<i class="fa-solid fa-i-cursor fa-fade" style="--fa-animation-duration: 2s; --fa-fade-opacity: 0.6;"></i>
</div>

Ein- und Ausblendfunktionen
Dienstprogramm	Beschreibung
`--fa-fade-opacity`	Legen Sie den niedrigsten Deckkraftwert fest, mit dem ein Symbol ausgeblendet wird.

Beat-Fade

Verwenden Sie die fa-beat-fade Animation, um Aufmerksamkeit zu erregen, indem Sie ein Symbol visuell skalieren und ein- und ausblenden.

<div class="fa-3x">
<i class="fa-solid fa-triangle-person-digging fa-beat-fade"></i>
<i class="fa-solid fa-square-exclamation fa-beat-fade"></i>
<i class="fa-solid fa-poo-bolt fa-beat-fade" style="--fa-beat-fade-opacity: 0.1; --fa-beat-fade-scale: 1.25;"></i>
<i class="fa-solid fa-circle-info fa-beat-fade" style="--fa-beat-fade-opacity: 0.67; --fa-beat-fade-scale: 1.075;"></i>
</div>

Beat-Fade-Dienstprogramme
Dienstprogramm	Beschreibung
`--fa-beat-fade-opacity`	Legen Sie den niedrigsten Deckkraftwert fest, auf den bzw. von dem ein Symbol ausgeblendet wird.
`--fa-beat-fade-scale`	Legen Sie den maximalen Wert fest, auf den ein Symbol skaliert wird.

Bounce

Verwenden Sie die fa-bounce Animation, um Aufmerksamkeit zu erregen, indem Sie ein Symbol visuell auf und ab hüpfen lassen.

Sprunganimation

<div class="fa-3x">
<i class="fa-solid fa-volleyball fa-bounce"></i>
</div>

Sprunganimation mit zusätzlichem Rückprall und „Quetschen“ bei der Landung

<div class="fa-3x">
<!-- Sprungkraft mit zusätzlichem Rückprall und „Quetschen“ bei der Landung -->
<i class="fa-solid fa-basketball fa-bounce" style="--fa-bounce-land-scale-x: 1.2;--fa-bounce-land-scale-y: .8;--fa-bounce-rebound: 5px;"></i>
</div>

Sprunganimation ohne „Quetschen“

<div class="fa-3x">
<!-- Sprunganimation ohne „Quetschen“ -->
<i class="fa-solid fa-frog fa-bounce" style="--fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1;"></i>

</div>

Sprunganimation ohne „Quetschen“ oder „Zurückprallen“

<div class="fa-3x">
<!-- Sprunganimation ohne „Quetschen“ oder „Zurückprallen“ -->
<i class="fa-solid fa-envelope fa-bounce" style="--fa-bounce-start-scale-x: 1;--fa-bounce-start-scale-y: 1;--fa-bounce-jump-scale-x: 1;--fa-bounce-jump-scale-y: 1;--fa-bounce-land-scale-x: 1;--fa-bounce-land-scale-y: 1;--fa-bounce-rebound: 0;"></i>
</div>

Bounce - Dienstprogramme
Dienstprogramme	Beschreibung
`--fa-bounce-rebound`	Legt den Rückprall eines Symbols bei der Landung nach dem Sprung fest.
`--fa-bounce-height`	Legt die maximale Sprunghöhe eines Symbols fest.
`--fa-bounce-start-scale-x`	Legt die horizontale Verzerrung des Symbols (Quetschen) beim Absprung fest.
`--fa-bounce-start-scale-y`	Legt die vertikale Verzerrung des Symbols (Quetschen) beim Absprung fest.
`--fa-bounce-jump-scale-x`	Legt die horizontale Verzerrung des Symbols (Quetschen) am höchsten Punkt des Sprungs fest.
`--fa-bounce-jump-scale-y`	Legt die vertikale Verzerrung des Symbols (Quetschen) am höchsten Punkt des Sprungs fest.
`--fa-bounce-land-scale-x`	Legt die horizontale Verzerrung des Symbols (Quetschen) bei der Landung nach dem Sprung fest.
`--fa-bounce-land-scale-y`	Legt die vertikale Verzerrung des Symbols (Quetschen) bei der Landung nach dem Sprung fest.

Flip

Verwenden Sie die fa-flip Animation, um ein Symbol im 3D-Raum zu drehen. Standardmäßig dreht Flip ein Symbol um 180 Grad um die Y-Achse. Flipping ist hilfreich für Übergänge, Verarbeitungszustände oder die Verwendung physischer Objekte, die in der realen Welt gedreht werden.

<div class="fa-3x">
<i class="fa-solid fa-compact-disc fa-flip"></i>
<i class="fa-solid fa-camera-rotate fa-flip"></i>
<i class="fa-solid fa-cassette-tape fa-flip"></i>
<i class="fa-solid fa-scroll fa-flip" style="--fa-flip-x: 1; --fa-flip-y: 0;"></i>
<i class="fa-solid fa-money-check-dollar fa-flip" style="--fa-animation-duration: 3s;"></i>
</div>

Flip-Dienstprogramme
Dienstprogramme	Beschreibung
`--fa-flip-x`	X-Koordinate des Vektors festlegen, der die Rotationsachse bezeichnet (zwischen 0 und 1)
`--fa-flip-y`	Legen Sie die y-Koordinate des Vektors fest, der die Rotationsachse bezeichnet (zwischen 0 und 1).
`--fa-flip-z`	Z-Koordinate des Vektors festlegen, der die Rotationsachse bezeichnet (zwischen 0 und 1)
`--fa-flip-angle`	Legen Sie den Drehwinkel des Flips fest. Ein positiver Winkel bedeutet eine Drehung im Uhrzeigersinn, ein negativer Winkel eine Drehung gegen den Uhrzeigersinn.

Shake

Verwenden Sie die fa-shake Animation, um Aufmerksamkeit zu erregen oder darauf hinzuweisen, dass etwas nicht erlaubt ist, indem Sie ein Symbol hin und her schütteln.

<div class="fa-3x">
<i class="fa-solid fa-bell fa-shake"></i>
<i class="fa-solid fa-lock fa-shake"></i>
<i class="fa-solid fa-stopwatch fa-shake"></i>
<i class="fa-solid fa-bomb fa-shake"></i>
</div>

Spin

Verwenden Sie die Klasse fa-spin, um ein beliebiges Symbol rotieren zu lassen, und fa-spin-pulse, um es in acht Schritten rotieren zu lassen. Dies funktioniert besonders gut mit fa-spinner und allen Symbolen aus der Kategorie Spinner. Wenn Sie möchten, dass sich ein Symbol rückwärts dreht (z. B. gegen den Uhrzeigersinn), fügen Sie die zusätzliche Klasse fa-spin-reverse hinzu.

<div class="fa-3x">
<i class="fa-solid fa-sync fa-spin"></i>
<i class="fa-solid fa-circle-notch fa-spin"></i>
<i class="fa-solid fa-cog fa-spin fa-spin-reverse"></i>
<i class="fa-solid fa-spinner fa-spin fa-spin-pulse"></i>
<i class="fa-solid fa-spinner fa-spin fa-spin-pulse fa-spin-reverse"></i>
</div>

Spin-Dienstprogramme
Dienstprogramme	Beschreibung
`fa-spin`	Lässt ein Symbol 360° im Uhrzeigersinn rotieren
`fa-spin-pulse`	Lässt ein Symbol in 8 Schritten um 360° im Uhrzeigersinn rotieren
`fa-spin-reverse`	Bei Verwendung in Verbindung mit `fa-spin` oder `fa-spin-pulse` dreht sich ein Symbol gegen den Uhrzeigersinn.

Font Awesome hat fa-pulse abgeschafft

Die Animationsklasse fa-pulse, welche in früheren Versionen von Font Awesome verwendet wurde, funktioniert weiterhin. Sie wurde jedoch in fa-spin-pulse umbenannt. Font Awesome ist der Meinung, dass dieser Name seinem Zweck besser entspricht, und wird in zukünftigen Versionen verwendet.

Barrierefreiheit

Wenn Sie Animationen im Web verwenden, sollten Sie ein paar Dinge beachten, um die Barrierefreiheit zu gewährleisten:

Im Allgemeinen ist es besser, Animationen als ergänzendes Hilfsmittel einzusetzen, anstatt sie als einzige Möglichkeit zu nutzen, um eine Änderung im Zustand der Benutzeroberfläche zu verdeutlichen. Achte darauf, auch den Text von Aktionen zu aktualisieren und andere visuelle Aspekte von Elementen zu ändern.

Was das Timing und die Dauer von Animationen angeht, solltest du vermeiden, den Zustand eines Elements mehr als dreimal pro Sekunde zu ändern. Schnelle Bewegungen können bei einigen Menschen fotosensitive Epilepsie auslösen.

Alle Animationen unterstützen inzwischen die CSS-Medienabfrage prefers-reduced-motion. Diese Funktion erkennt, ob ein Nutzer in den Einstellungen seines Geräts festgelegt hat, dass er weniger Bewegungen auf der Seite sehen möchte, und passt die Animationen entsprechend an.

Mehr Informationen

Benutzerdefinierte CSS-Eigenschaften
Symbolanimation + Wackeln
Konflikte mit animate.css
Safari-Bug mit animierten Symbolen