CSS-Animation vs. Übergang: Keyframes erklärt

Jeder Entwickler hat einen Block kopiert @keyframes Aus einer Stack Overflow Antwort, eingeklebt, aufgefrischt, und fand das Element perfekt still sitzen Neun mal von zehn ist der Grund langweilig: der Animationsname in der @keyframes Regel nicht mit dem Namen in der animation Kurzschrift, oder die Dauer wurde bei Null belassen, oder die Klasse ist nie auf dem Element gelandet Der andere Grund ist, dass die Keyframe-Animation eine dieser Ecken von CSS ist, wo man das Ergebnis nicht durch das Lesen des Codes beurteilen kann Eine Folge von Prozentsätzen und Transformationen sagt Ihnen nichts darüber, ob sich die Bewegung glatt, bissig oder seekrank anfühlt, bis Sie sie laufen sehen.

Eine CSS-Animation ist der browser' s-Mechanismus zum Verschieben eines Elements durch eine benannte Folge von Stilen im Laufe der Zeit Anders als bei einem Übergang, der eine einzelne Änderung animiert und auf einen Auslöser wartet, folgt eine Animation einem @keyframes Skript mit so vielen Schritten, wie Sie möchten, kann für immer in eine Schleife geraten und beginnt in dem Moment, in dem es angewendet wird, von selbst. Es ist das, was das Laden von Spinnern, Aufmerksamkeitsimpulsen, Eingangseffekten und jedem bisschen Umgebungsbewegung antreibt, die dafür sorgt, dass sich eine Schnittstelle lebendig anfühlt Aber die beiden Hälften, die Keyframes und die Kurzschrift, müssen genau übereinstimmen, und die Kurzschrift fasst sieben oder acht Werte in einer Zeile zusammen, in einer Reihenfolge, die sich die meisten Menschen nie merken.

der CSS-Animationsgenerator Entfernt das Rätselraten Sie wählen eine Bewegung aus einer Bibliothek von Voreinstellungen aus, passen die Dauer, Lockerung, Verzögerung, Iterationsanzahl und Richtung an und sehen sie auf einem Live-Vorschauelement abspielen Das Tool schreibt sowohl die @keyframes Regel und das Matching animation Kurzschrift in ein kopierfertiges Feld, wobei die Namen bereits synchronisiert sind, sodass der Block, den Sie einfügen, beim ersten Mal funktioniert.

tl; dr: Eine CSS-Animation bewegt ein Element durch ein @keyframes Sequenz im Zeitverlauf, und im Gegensatz zu einem Übergang benötigt er keinen Trigger und kann Schleifen Die @keyframes Name und die animation-name Genau übereinstimmen muss, was der häufigste Grund ist, warum eine Animation nichts tut Die Kurzschrift trägt Namen, Dauer, Timing-Funktion, Verzögerung, Iterationszahl, Richtung und Füllmodus. Animieren Sie lieber transform und opacity Für eine reibungslose, zusammengesetzte Bewegung Dieser Generator gibt Ihnen vierzehn Voreinstellungen, volle Wiedergabesteuerung und eine Live-Vorschau und sendet sowohl die Keyframes als auch die Kurzschrift zusammen aus. Es läuft vollständig in Ihrem Browser ohne Anmeldung.

Welches Problem löst ein CSS-Animationsgenerator?

Das Unbeholfene an der Keyframe-Animation ist die Hin - und Rückfahrt Um einen Bounce per Hand abzustimmen, schreibt man die @keyframes Regel, schreiben Sie die animation Zeile, Datei speichern, zum Browser wechseln, auf das Reload warten, und zusehen, wenn der Bounce zu aggressiv ist wechselt man einen translateY Wert und machen Sie die ganze Schleife wieder Da dieser Zyklus langsam ist, akzeptieren die meisten Leute die erste Version, die nicht kaputt aussieht, und nicht die Version, die sich richtig anfühlt, und der Unterschied zwischen diesen beiden ist genau der Lack, der eine betrachtete Schnittstelle von einer Vorlage trennt.

Ein Generator kollabiert diese Schleife in einem einzigen Klick, Sie wählen eine Voreinstellung, ziehen den Dauerschieber und das Vorschauelement spielt die Bewegung sofort vor Ihnen ab Schalten Sie die Zeitfunktion von ease Auf eine bezier Kurve und die Änderung des Gefühls ist augenblicklich Stellen Sie die Iterationszahl auf unendlich und die Animationsschleifen, damit Sie sie studieren können Nach ein paar Minuten davon bauen Sie eine Intuition dafür auf, wie sechshundert Millisekunden gegen zwölfhundert aussehen, was der Sinn ist, den Sie brauchen, um überall sonst gute Bewegungsentscheidungen zu treffen.

Es gibt auch ein Argument für die Richtigkeit. Man kann keine Fehlbildung produzieren animation Wert durch Auswahl aus Menüs und Ziehen von Schiebereglern, und Sie können den Keyframe-Namen nicht falsch eingeben, da das Tool die Kurzschrift an die von ihm generierten Keyframes bindet. Die Ausgabe kann immer sicher eingefügt werden. Diese Zuverlässigkeit ist derselbe Grund, warum ich visuelle CSS-Builder für andere Eigenschaften geschlossen halte, derselbe Instinkt, der nach dem greift Gradientengenerator Anstatt Farbstopps in meinem Kopf zu zählen, oder die Kastenschattengenerator Anstatt Unschärferadien zu erraten.

Wie unterscheidet sich eine CSS-Animation von einem CSS-Übergang?

Das bringt die Leute ständig auf die Palme, deshalb lohnt es sich, genau zu sein Ein Übergang animiert eine einzelne Eigenschaft zwischen zwei Zuständen und erfordert etwas, das sich ändern muss, einen Hover, einen Fokus, eine umgeschaltete Klasse, bevor er ausgeführt wird Es hat einen Startwert und einen Endwert und nichts dazwischen Eine Animation folgt dagegen a @keyframes Regel, die beliebig viele Zwischenschritte definieren kann, so dass sich das Element durch eine ganze Choreographie bewegen kann, anstatt eine gerade Linie von A nach B. Es wartet auch nichts: Anwenden und es spielt.

Die praktische Konsequenz ist, dass man zu einem Übergang greift, wenn man eine Zustandsänderung glätten möchte, und zu einer Animation, wenn man eine Bewegung haben möchte, die dem Element innewohnt Ein Knopf, der sich im Schwebeflug verdunkelt, ist ein Übergang Ein Spinner, der sich für immer dreht, ein Abzeichen, das pulsiert, um das Auge zu ziehen, oder eine Karte, die beim Laden der Seite nach oben gleitet, sind alles Animationen, denn die Bewegung geschieht von selbst und wiederholt sich oft Wenn Sie noch entscheiden, welchen ein gegebener Effekt benötigt, ist die Faustregel einfach: Wenn eine Benutzeraktion sie startet und sie in eine Richtung geht, verwenden Sie einen Übergang; wenn sie von selbst spielt, Schleifen oder mehr als zwei Schritte hat. Die Animation CSS-Übergangsgenerator Ist das Begleitwerkzeug für den ersten Fall, und die beiden decken den größten Teil der Bewegung ab, die Sie jemals schreiben werden.

Aspekt	Übergang	Animation
Auslösen	Braucht einen Zustandswechsel (Hover, Fokus, Klasse)	Beginnt bei der Anwendung von selbst
Schritte	Zweitens ein Anfang und ein Ende	Jede Nummer, über @keyframes
Schräglaufend	Nein, läuft einmal pro Wechsel	Ja, mit iteration-count
Typische Verwendung	Hover - und Fokus-Effekte	Spinner, Impulse, Eingänge

Wie ist die richtige Reihenfolge der Animationskurzschrift?

der animation Die Kurzschrift ist dicht. Sie kann den Keyframe-Namen, die Dauer, die Timing-Funktion, die Verzögerung, die Iterationszahl, die Richtung, den Füllmodus und den Wiedergabezustand tragen, alles auf einer Zeile, und die Reihenfolge ist für die beiden Zeitwerte genau so wichtig, wie sie es für Übergänge tut. Dieser Generator schreibt den Namen zuerst, dann die Dauer und die Timing-Funktion, dann die optionale Verzögerung, dann die Iterationszahl, die Richtung und den Füllmodus, zum Beispiel animation: fadeIn 0.6s ease 1 both. Den Namen zuerst zu schreiben ist legal, da Keyframe-Namen keine CSS-Keywords sind, und er liest sich klarer, als den Namen am Ende zu begraben.

Die eine Regel, die alle fängt, sind die beiden Zeitwerte Dauer und Verzögerung sind beide Zeiten, und CSS teilt sie nur nach Position auseinander: der erste Zeitwert ist die Dauer und der zweite die Verzögerung Alles andere in der Kurzschrift ist ein Schlüsselwort oder eine einheitenlose Zahl, also kann es nicht mit einer Zeit verwechselt werden Deshalb kann das Tool die Verzögerung sicher fallen lassen, wenn sie Null ist, weil eine einheitenlose 1 oder das Wort infinite Das folgt ist unmissverständlich die Iterationsanzahl, kein zweites Mal Der Generator lässt auch jeden Wert weg, der seinem CSS-Standard entspricht, also a normal Richtung oder eine none Der Füllmodus überlastet die Ausgabe nie. Das Ergebnis ist eine Kurzschrift, die so liest, wie Sie sie von Hand schreiben würden, wenn Sie die Regeln kennen würden.

Warum läuft meine CSS-Animation nicht?

Das ist die Klippe, und fast jeder geht mindestens einmal davon ab Die häufigste Ursache ist ein Missverhältnis zwischen den animation-name und der Name in der @keyframes Regel. ein Tippfehler, ein Groß - und Kleinschreibungunterschied, oder ein Name, der an der einen Stelle umbenannt wurde und nicht an der anderen, lässt dem Browser keine Keyframe-Regel zum Binden, tut also stillschweigend nichts Es gibt keinen Fehler und keine Warnung; das Element sitzt einfach da, weil dieser Generator beide Hälften vom gleichen Namen zusammenschreibt, verschwindet diese ganze Bugklasse, was einen großen Teil des Punktes ausmacht.

Die anderen Ursachen sind wissenswert, denn sie tauchen auf, wenn man Animationen von Hand schreibt Eine Dauer von Null bedeutet, dass die Animation sofort abgeschlossen ist und man sie nie sieht Ein Element, das ist display: none Führt seine Animationen überhaupt nicht aus, so dass ein Fade-In, das vom gerenderten Element abhängt, nicht feuert Eine fehlende oder falsch geschriebene Eigenschaft innerhalb eines Keyframes wird leise ignoriert, anstatt markiert zu werden Und eine Animation mit animation-fill-mode: none„Die Standardeinstellung gibt das Element in dem Moment, in dem es fertig ist, wieder auf seine einstimmigen Stile zurück, was so aussehen kann, als wäre es nie gelaufen, wenn die Bewegung subtil wäre. Wenn Sie die Animation in einer Live-Vorschau ansehen, werden die meisten davon in Sekundenschnelle angezeigt, was beim Aufbau der Bewegung der Fall ist, wo Sie sie sehen können, und nicht in einer Datei, die Sie ständig neu laden.

Was macht der Animation-Fill-Modus?

Der Füllmodus ist die Einstellung, die die Leute als letztes verstehen und am meisten brauchen. Er entscheidet, welche Stile das Element außerhalb des aktiven Fensters von animation' s anzeigt, sowohl bevor es während einer Verzögerung startet als auch nachdem es beendet ist Die Voreinstellung, none, bedeutet, dass das Element den ersten und letzten Keyframe ignoriert, wenn die Animation nicht ausgeführt wird, also sitzt es vor der Animation in seinen normalen Stilen und schnappt danach zu ihnen zurück. Dieser Snap-Back ist die Quelle einer sehr häufigen Frustration: Sie animieren ein Element, um darin auszublenden, es verblasst wunderschön und verschwindet dann wieder, sobald die Animation endet, denn mit none Das Finale opacity: 1 Keyframe wird verworfen, sobald die Animation beendet ist.

Der Fix ist animation-fill-mode: forwards, wodurch der letzte Keyframe nach Abschluss der Animation angewendet bleibt, sodass das eingeblendete Element sichtbar bleibt. backwards Wendet den ersten Keyframe während einer Verzögerung vor dem Start der Animation an, was nützlich ist, wenn Sie eine Verzögerung haben und nicht möchten, dass das Element zuerst in seinem Standardzustand blinkt. both Tut beides auf einmal und ist die sicherste allgemeine Wahl für Eingangsanimationen, weshalb dieser Generator neue Animationen standardmäßig verwendet both. Der Füllmodus zu verstehen ist der Unterschied zwischen einem Eingang, der landet, und einem, der sich selbst rückgängig macht, und es ist weitaus einfacher zu erfassen, indem man ihn in einer Vorschau umschaltet und die Änderung des Endes beobachtet, als wenn man die Spezifikation kalt liest.

Wann sollte eine Animationsschleife sein und wie kontrolliere ich sie?

Die Iterationszahl entscheidet, wie oft die Animation läuft Setzen Sie sie auf eine positive ganze Zahl und die Animation wiederholt sich so oft und stoppt dann; stellen Sie sie auf infinite Und es läuft ewig Schleifen Animationen sind die richtige Wahl für Ambient, laufende Bewegung, ein Spinner, der zeigt, wie Arbeit passiert, ein Puls, der einen Call-to-Action am Leben hält, ein subtiler Float, der einem Heldenbild etwas Leben gibt One-Shot Animationen, einmal laufen, sind für Ein - und Ausgänge, wo die Bewegung einen klaren Anfang und ein klares Ende hat und eine Wiederholung ablenken würde.

Die Richtung wird mit der Iterationsanzahl gekoppelt, um zu formen, wie jeder Durchgang ausgeführt wird. Die Standardeinstellung normal Spielt jede Iteration vom ersten Keyframe bis zum letzten ab. reverse Spielt jedes rückwärts. alternate Führt den ersten Durchgang vorwärts und den nächsten rückwärts, Ping-Ponging zwischen den Endpunkten aus, wodurch Sie einen glatten Hin- und Her-Impuls aufbauen, ohne eine Rückfahrt in den Keyframes zu definieren. alternate-reverse Startet rückwärts und wechselt von dort aus Der Generator legt alle vier frei, damit man den Unterschied spüren kann: einen Impuls mit alternate Atmet auf natürliche Weise ein und aus, während die gleichen Keyframes mit normal Und eine gerade Anzahl von Schritten muss die Rückkehr selbst kodieren Für Schleifenbewegung, alternate Fast immer ergibt sich das organischere Ergebnis mit weniger Keyframe-Arbeit.

Welche Eigenschaften sollte ich für eine reibungslose Performance animieren?

Die Eigenschaften, die Sie animieren, entscheiden, ob die Bewegung mit glatten sechzig Bildern pro Sekunde läuft oder stottert, und die Wahl ist die gleiche wie bei Übergängen Bevorzugen transform und opacity. Beide können an den Compositor übergeben und animiert werden, ohne dass der Browser das Seitenlayout neu berechnet, sodass sie auch auf bescheidener Hardware und unter Last glatt bleiben. Deshalb eine Karte, die mit nach oben gleitet transform: translateY Fühlt sich mühelos an, während dieselbe Karte mit animiert wird top oder margin-top Fühlt sich rau an Jeder Eingang, der in diesem Generator voreingestellt ist, ist darauf aufgebaut transform und opacity Aus genau diesem Grund.

Die Eigenschaften, um eine Animation in einer Keyframe-Sequenz zu vermeiden, sind diejenigen, die das Layout auslösen: width, height, top, left, margin und padding. Das Ändern eines dieser zwingt den Browser, die Geometrie des Elements und alles um es herum auf jedem Bild neu zu berechnen, was teuer ist und die häufigste Ursache für scherzhafte Animationen ist, verschlimmert sich, wenn die Animation in einer Schleife läuft und die Kosten kontinuierlich bezahlt Wenn Sie möchten, dass ein Element wächst, ein transform: scale Ist fast immer günstiger als animieren width und height, und es sieht fast identisch aus Das umfassendere Argument für die Zusammenstellung einer Reihe von Werkzeugen, die Sie auf den billigen Weg lenken, liegt in der Webentwickler-Toolkit Stück, und die Workflow-Gewohnheiten, die Bewegung zu einer schnellen und nicht zu einer langsamen Entscheidung machen, sind in der Entwicklerproduktivitätstools Führung.

Wie hält der Generator die Vorschau ehrlich?

Jeder visuelle Builder riskiert, dass die Vorschau und der exportierte Code auseinanderdriften, bis das Tool Ihnen einen Wert beibringt, der sich nicht reproduzieren lässt Dieser Generator injiziert genau den @keyframes Regel es in die Seite ausgibt und wendet die genaue animation Kurz gesagt, es zeigt Ihnen das Vorschauelement an, also ist die Bewegung, die Sie ansehen, die Bewegung, die Ihr kopiertes CSS erzeugen wird. Es gibt keinen separaten Animationspfad, der nicht zustimmen könnte, und der Keyframe-Name in der Vorschau ist der Name in der Ausgabe.

Da eine Animation auf mount läuft und dann beendet wird, benötigt die Vorschau eine Möglichkeit, sie wiederzugeben, die das Tool durch erneutes Einhängen des Vorschauelements beim Drücken der Wiedergabe verarbeitet. Das spiegelt wider, wie sich eine One-Shot-Animation in der Produktion verhält, wo sie abgespielt wird, wenn das Element erscheint, und dann ihren endgültigen Zustand entsprechend dem Füllmodus beibehält. Die Ausgabe bleibt ebenfalls minimal, wodurch die Nullverzögerung und ein beliebiger Standardwert verloren gehen, sodass Sie nur aussagekräftige Deklarationen kopieren, die gleiche Disziplin, nichts Redundantes auszugeben, das durch die läuft CSS-Filtergenerator Und die anderen visuellen Builder Wenn Sie eine Keyframe-Animation mit einem Layout koppeln, das das Element positioniert, wird die Flexbox-generator Naturbegleiter für den Bau der umgebenden Struktur ist.

Welche Browser unterstützen CSS-Animationen?

CSS-Animationen werden in jedem aktuellen Browser unterstützt und das schon seit weit über einem Jahrzehnt Die @keyframes Regel, die animation Die Kurzschrift und alle ihre Langgriffe sind universell und vorbestimmt, so dass die Ausgabe dieses Generators in Chrome, Firefox, Safari und Edge ohne Anbieterpräfixe oder Fallbacks funktioniert. Die endgültige Referenz ist die CSS Animations Level 1-Spezifikation aus dem W3 C, die die primäre Quelle dafür ist, wie sich jeder Teil der Kurzschrift verhält, und es lohnt sich zu lesen, sobald der Generator Ihnen ein physisches Gefühl dafür gegeben hat, was die Teile tun. Denken Sie für die Zugänglichkeit daran, dass einige Benutzer eine festlegen prefers-reduced-motion Präferenz, und es ist eine gute Praxis, nicht-essentielle Schleifenanimationen in eine Medienabfrage zu verpacken, die sie respektiert, damit Umgebungsbewegungen für Menschen ausgeschaltet werden können, die sie als unangenehm empfinden.

Wenn Sie einen größeren Satz visueller CSS-Tools zusammenbauen, können Sie den Übergangsgenerator und den CSS-Transformationsgenerator Sitzen Sie natürlich neben diesem, da Transformationen das Rohmaterial sind, bewegen sich die meisten dieser Animationen und Übergänge verarbeiten die Zustandsänderungen, Animationen nicht. Hier läuft alles clientseitig, und das CSS, das Sie kopieren, können Sie ohne Laufzeit, ohne Build-Schritt und ohne Abhängigkeit verwenden.

Häufig gestellte Fragen

Was ist ein CSS-Animationsgenerator?

Ein CSS-Animationsgenerator ist ein visuelles Werkzeug, das eine Keyframe-Animation aus den von Ihnen gewählten Einstellungen erstellt Sie wählen eine Voreinstellung aus, legen die Dauer, Lockerung, Verzögerung, Iterationsanzahl und - richtung fest, und es gibt die aus @keyframes Herrschaft und die animation Kurzschrift zusammen mit einer Live-Vorschau können Sie wiedergeben.

Was ist der Unterschied zwischen einer CSS-Animation und einem CSS-Übergang?

Ein Übergang animiert eine einzelne Änderung zwischen zwei Zuständen und benötigt zum Ausführen einen Auslöser wie Hover Eine Animation folgt a @keyframes Sequenz mit beliebig vielen Schritten, kann Schleife bilden und startet von selbst, sobald es angewendet wird, ohne auf eine Zustandsänderung zu warten.

Welche Reihenfolge verwendet die Animationskurzschrift?

Dieses Tool schreibt zuerst den Keyframe-Namen, dann Dauer, Timing-Funktion, Verzögerung, Iterationszahl, Richtung und Füllmodus, zum Beispiel Animation: fadeIn 0,6 s easy 1 sowohl Der erste Zeitwert ist immer die Dauer als auch der zweite die Verzögerung, so dass ein einzelner Zeitwert als Dauer gelesen wird.

Wie mache ich eine CSS-Animationsschleife für immer?

Stellen Sie die Iterationszahl auf unendlich, in der Kurzschrift ist das das Wort unendlich, wie in der Animation: Spin 1 s linear unendlich Jede positive ganze Zahl wiederholt stattdessen die Animation so oft und stoppt dann entsprechend dem Füllmodus und der Richtung.

Warum läuft meine CSS-Animation nicht?

Die häufigste Ursache ist eine Nichtübereinstimmung zwischen dem Animationsnamen und dem Namen @keyframes, einschließlich eines Tippfehlers oder einer Falldifferenz, wodurch der Browser keine Regel mehr hat, an die er sich binden kann. Überprüfen Sie außerdem, ob die Dauer über Null liegt und ob das Element gerendert ist, da eine Animation auf einem Display: Kein Element läuft nicht.

Was bewirkt die Eigenschaft Animation-Fill-Mode?

Der Füllmodus entscheidet, welche Stile das Element vor dem Start und nach dem Ende der Animation anzeigt. Die Standardeinstellung no snaps das Element zurück zu seinen normalen Stilen, wenn die Animation beendet ist Das Einstellen von Vorwärts behält den endgültigen Keyframe, Rückwärts wendet den ersten Keyframe während einer Verzögerung an und beides tut.

Welche Eigenschaften sollte ich für eine reibungslose Performance animieren?

Transformieren und Opazität bevorzugen Der Browser kann sie auf dem Compositor animieren, ohne das Layout neu zu berechnen, so bleiben sie glatt bei 60 fps. Die Animation von Breite, Höhe, oben, links oder am Rand erzwingt eine Layout-Neuberechnung auf jedem Frame, was der übliche Grund dafür ist, dass eine Animation stottert.

Ist die generierte Animation CSS kostenlos und sicher zu verwenden?

Ja. Das Tool ist völlig kostenlos ohne Anmelde - oder Nutzungsbeschränkungen, und es sendet standardmäßiges, vorfixiertes CSS aus, das in jedem modernen Browser unterstützt wird. Alle Verarbeitungen finden in Ihrem Browser statt, sodass nichts hochgeladen wird und das Tool nach dem Laden offline funktioniert.