CSS-Keyframe-Animationen erstellen

Ein visueller Generator für CSS-Keyframe-Animationen, mit dem Sie einsatzfertigen CSS-Code mit @keyframes erstellen, in der Vorschau prüfen und exportieren können, ohne selbst Code zu schreiben.

Zuletzt aktualisiert: 23. September 2026

Entwerfen Sie Animationen in Echtzeit über eine Drei-Panel-Oberfläche: Einstellungen auf der linken Seite anpassen, Keyframes in der Mitte formen, auf der rechten Seite zusehen.

Was es tut:

• Timeline-Editor: Klicken Sie, um Keyframe-Stopps hinzuzufügen, ziehen Sie die Punkte, um sie um einen beliebigen Prozentsatz zu verschieben

• Eigenschaften-Editor: Steuerung von Deckkraft, Transformationen (transponieren, drehen, skalieren, schrägstellen), Filtern, Farben, Größe und mehr pro Keyframe

• Live-Vorschau: Spielt Ihre Animation auf einem Kasten, Kreis oder Textform; scrollen Sie durch sie Bild für Bild

• Code-Ausgabe: erzeugt sauberes @keyframes CSS im Voll- oder Keyframe-only-Modus, Longhand- oder Shorthand-Syntax

• 12 integrierte Presets in den Kategorien Entrance, Attention, Continuous und Exit als Ausgangspunkt

Easing-Optionen umfassen Standardkurven, Federn, Bounce und Stufen-Timing, die jeweils mit einem Live-Kurvendiagramm visualisiert werden.

Was ist ein CSS-Keyframe-Animationsgenerator?

Ein CSS-Keyframe-Animationsgenerator ist ein browserbasiertes Werkzeug, das eine visuelle Zeitleiste in funktionierenden @keyframes-Code verwandelt.

Anstatt Prozentsätze und Animationseigenschaften manuell einzugeben, ziehen Sie Schieberegler, wählen Entspannungskurven aus und beobachten Sie die Bewegung live.

Die gesamte Aufgabe des Tools ist es, das Syntax-Raten zwischen dem Wunsch nach Bewegung und dem Senden einer fertigen Stylesheet-Regel zu entfernen.

Es gehört zur gleichen Familie wie andere Einzweck-Generator-Tools, ähnlich im Geist wie ein css-Loader-Generator, der speziell für Spinner und nicht für allgemeine Bewegung gebaut wurde.

Die meisten Keyframe-Generatoren teilen eine kurze Liste von Aufgaben, die sie gut erledigen müssen.

• Konvertieren einer Zeitleiste in prozentuale Keyframe-Stopps
• Offenlegen der üblichen animierbaren Eigenschaften, Transformieren, Deckkraft, Farbe
• Sehen Sie sich die Bewegung vor dem Export in Echtzeit in der Vorschau an
• Kopier- und Einfügefähige CSS-, SCSS- oder JS-Syntax ausgeben

Animista zeigt zum Beispiel genau diesen Arbeitsablauf. Wählen Sie eine Kategorie, schieben Sie ein paar Schieberegler, kopieren Sie das CSS.

Hier hilft es, sich mit CSS (EN) selbst vertraut zu machen, da ein Generator unter der Haube immer nur Standard-CSS schreibt.

Es geht nicht darum, neue Syntax zu erfinden. Es ist einfach das Zusammensetzen von Teilen schneller als die meisten Leute sie von Hand tippen.

Welche Ausgabeformate und Exportoptionen bieten Generatoren an?

Die meisten Generatoren geben standardmäßig einfaches CSS zurück, das direkt in ein Stylesheet eingefügt werden kann.

Einige gehen noch weiter und bieten SCSS-Ausgabe oder ein JavaScript-Objekt, das für Inline-Stilprops in React oder Vue geformt ist.

Allgemeine Exportpfade:

• In die Zwischenablage kopieren, die schnellste Option für eine einmalige Animation
• Als eigenständige .css-Datei herunterladen
• Schieben Sie direkt auf einen CodePen, um ihn zu teilen oder weiter zu optimieren

Die Zwischenablage-Option ist das, wonach die meisten Leute greifen. Das Herunterladen einer Datei hilft nur, wenn Sie mehrere Animationen in einer Sitzung generieren und sie zusammengebündelt haben möchten.

Nichts davon ersetzt das Durchsuchen von fertigen Beispielen zuerst. Eine Seite mit css animation (EN) Demos zeigt dir oft genau den Effekt, den du willst, ohne dass du den Generator-Schritt überspringen musst.

Exportierter Code braucht immer noch ein Zuhause. Normalerweise fügen Sie den generierten Block nach Ihren anderen Regeln ein und verweisen dann auf den Animationsnamen aus der Shorthand-Eigenschaft des Elements, das sich bewegen soll.

Eine Sache, die es wert ist, frühzeitig gemeldet zu werden: Generierte Klassennamen sind oft generisch, Dinge wie "fadeInUp1" oder "spin2" Benennen Sie sie um, bevor sie mit etwas kollidieren, das bereits in Ihrem Stylesheet vorhanden ist.

Wie funktionieren CSS Keyframe Animationsgeneratoren?

Ein Generator wandelt die Zeitleiste, die Sie erstellen, in eine tatsächliche @keyframes-Regel um und übersetzt jeden Stopp in einen Prozentsatz innerhalb des Blocks.

Unter den Schiebereglern und Farbwählern schreibt man einfach einen Keyframe-Selektor für jeden Stop, der dieselbe Syntax verwendet, die man in handgeschriebenen CSS-Keyframes (EN) findet.

Keyframe-Prozentsatzstopps

Jede Animation läuft von 0% bis 100%, und ein Generator lässt Sie zusätzliche Stopps überall dazwischen fallen.

Ein typischer Bounce mit drei Stopps könnte so aussehen:

Einen Stopp bei 50% hinzuzufügen, anstatt direkt von 0% auf 100% zu springen, verwandelt eine flache Bewegung in etwas, das sich tatsächlich federnd anfühlt.

Timing-Parameter

Neben den Keyframe-Stopps zeigt ein Generator die numerische Seite der Animations-Kurzform-Eigenschaft an.

• Duration: wie lange ein Zyklus dauert, normalerweise in Sekunden eingestellt
• Delay: wie lange der Browser wartet, bevor er startet
• Iteration count: wie oft sich der Zyklus wiederholt, oder unendlich für eine Schleife
• Richtung: ob es vorwärts, rückwärts oder abwechselnd jeden Zyklus spielt

Die Standarddauer der meisten Generatoren liegt zwischen einer halben und zwei Sekunden, da dieser Bereich den Großteil der tatsächlich erstellten UI-Bewegungen abdeckt.

Die Deckung des Eigentums ist genauso wichtig wie das Timing.

Generatoren sind am stärksten mit Transformation und Deckkraft, die beide GPU-beschleunigt bleiben, und schwächer mit Layout-auslösenden Eigenschaften wie Breite oder Oberseite.

Nicht zusammengesetzte Animationen, die zum Jacken neigen, erscheinen immer noch auf 40% der mobilen Seiten und 44% der Desktop-Seiten (Annnimate, 2026), und der größte Teil davon stammt von der Animation der falschen Eigenschaften.

Das Hinzufügen eines Will-Change-Hinweises, bevor eine schwere Animation beginnt, kann helfen. Übermäßige Verwendung verbraucht nur Speicher ohne wirklichen Nutzen.

Einige Werkzeuge erlauben es Ihnen auch, SVG-Elemente direkt anzuvisieren, das gleiche Gebiet, das in den Anleitungen zum Animieren von SVG mit CSS (EN) behandelt wird, indem Sie stroke-dashoffset oder Pfaddaten anstelle einer Transformation verwenden.

Mit den Chrome DevTools und dem Animation Inspector von Firefox können Sie die exportierte Animation anschließend Bild für Bild bereinigen, wodurch Fehler aufgedeckt werden, die bei einer Live-Vorschau allein übersehen werden können.

Welche Easing-Funktionen unterstützen CSS Animationsgeneratoren?

Jeder Generator wird mit den Standard-Timing-Schlüsselwörtern geliefert: Linear, Ease, Ease-In, Ease-Out und Ease-In-Out.

Linear fühlt sich mechanisch und eben an. Ease-in-out fühlt sich natürlich an, weil es nachahmt, wie physische Objekte tatsächlich beschleunigen und verlangsamen.

Über die Presets hinaus bieten die meisten Tools auch:

• Ein benutzerdefinierter Editor für kubische Bezier-Kurven, der zwei Kontrollpunkte auf einem Diagramm zieht
• Schrittfunktionen für Frame-by-Frame- oder Sprite-Style-Bewegung
• Benannte Feder-ähnliche Presets auf den eher designorientierten Werkzeugen

Das Ziehen einer Bezier-Kurve nach Augenmaß ist umständlich. „cubic-bezier.com“ von Lea Verou bleibt das Referenztool für die Betrachtung einer Kurve außerhalb eines Generators.

Die Entspannungskurve verändert sich mehr als sie aussieht. Ein steiler Ease-in in einem Dropdown-Menü kann eine 200-ms-Animation träge wirken lassen, während die gleiche Kurve in einer 600-ms-Heldenanimation absichtlich wirkt.

Dies falsch zu machen ist einer der häufigsten Gründe, warum sich eine generierte Animation "aus" anfühlt, selbst wenn der Code technisch korrekt ist.

Wie wirkt sich die Browserkompatibilität auf generierte CSS-Animationen aus?

Moderne Browser verarbeiten standardmäßige @keyframes-Animationen ohne Herstellerpräfix, sodass der meiste generierte Code sofort funktioniert.

CSS-Animationen haben einen Kompatibilitätswert von 97 von 100 für aktuelle Desktop- und Mobilbrowser (LambdaTest, 2025), was den größten Teil des realen Datenverkehrs abdeckt.

Präfixe wie -webkit- sind jetzt nur noch für eine Handvoll älterer Safari- und Android-Browser-Versionen relevant, oder für einige neuere experimentelle Eigenschaften, die immer noch an der vollen cross-browser-kompatibilität (EN) arbeiten.

Teams, die einen Build-Schritt ausführen, lassen dies normalerweise von Autoprefixer automatisch verarbeiten, basierend auf der von ihnen konfigurierten Browserliste.

Wo Kompatibilität immer noch Leute aufwirft:

• Sehr alte Android-Browser-Versionen, die -webkit- Animationseigenschaften benötigen
• Safari hinkt Chrome und Firefox bei brandneuen animationsbezogenen Eigenschaften hinterher
• Reduzierte Bewegungsabwicklung, da ein Generator Ihre Ausgabe nicht für Sie in eine Medienabfrage einwickelt

Dieser letzte Punkt ist es wert, mit zu sitzen. Das Respektieren der Bewegungseinstellungen eines Benutzers ist ein manueller Schritt, nicht etwas, das die Export-Schaltfläche für Sie erledigt.

Welchen CSS-Keyframe-Animationsgenerator solltest du verwenden?

Die richtige Wahl hängt davon ab, ob Sie einen visuellen Builder, einen unbearbeiteten Zeitleisten-Editor oder eine vorgefertigte Bibliothek wünschen, die Sie nie konfigurieren müssen.

Animista, gebaut von Entwickler Ana Travas, neigt zu schnellen visuellen Verbesserungen. Sie durchsuchen Kategorien wie Eingänge, Ausgänge und Aufmerksamkeitssuchende und passen dann die Schieberegler an, bis etwas passt.

Keyframes.app begünstigt Leute, die den Rohprozentsatz der Stopps sehen möchten, während sie arbeiten, näher an einem Timeline-Tool als eine voreingestellte Galerie.

Animate.css überspringt den Editor vollständig. Sie fügen einem Element einen Klassennamen hinzu und erhalten einen von Dutzenden vordefinierter Effekte, ohne dass Keyframes geschrieben werden müssen.

Keine der drei berechnet für die Nutzung, so dass der entscheidende Faktor ist wirklich Workflow. Wählen Sie den visuellen Builder, wenn Sie im laufenden Betrieb entwerfen, und die Bibliothek, wenn Sie bereits genau wissen, welchen Effekt Sie wünschen.

CSS-Keyframe-Generatoren vs. Hand-Coding vs. JavaScript-Animationsbibliotheken: Welches gewinnt?

Ein Generator gewinnt an Geschwindigkeit für einfache, in sich geschlossene Bewegung. Die manuelle Programmierung gewinnt an Kontrolle, und eine JavaScript-Bibliothek gewinnt, wenn die Animation auf etwas reagieren muss.

Generator-gebautes CSS:

• Schnell für gängige Muster wie Fades, Bounces und Hovers
• Läuft im Compositor-Thread, wenn es Transformation oder Deckkraft animiert, sodass es im Haupt-Thread kostengünstig bleibt
• Begrenzt, wenn Sie Sequenzierung über mehrere Elemente benötigen

Handgeschriebenes CSS:

• Volle Kontrolle über jede Immobilie und jeden Halt
• Keine Abhängigkeit von den Export-Feinheiten eines Drittanbieter-Tools
• Langsamer, um von Grund auf neu zu schreiben, insbesondere für komplexe Multi-Stop-Timelines

JavaScript Animationsbibliotheken:

• Handhaben Sie Sequenzierung, Scroll-Trigger und Unterbrechung anmutig
• Fügen Sie Bündelgewicht hinzu, das ein reiner CSS-Ansatz nicht trägt
• Besser geeignet für JavaScript-lastige Schnittstellen, die bereits ein Framework laden

Wie uneinheitlich das in der Praxis tatsächlich ist, zeigen die Nutzungsdaten. 91,7% der mobilen Seiten laden mindestens einen CSS-Übergang, während nur 18,4% eine JavaScript-Animationsbibliothek laden (Annnimate, 2026).

Die gleiche Analyse platziert GSAP, die bekannteste Animationsbibliothek nach Reputation, auf etwa 2,2% aller Websites. Webflow hat es im April 2025 komplett kostenlos gemacht, einschließlich Plugins, und die Akzeptanz hat sich immer noch nicht viel bewegt.

Für einen einfachen Hover-Zustand oder eine einzelne Eigenschaftsänderung ist ein einfacher CSS-Übergang in der Regel schneller als das Erstellen vollständiger Keyframes.

Verwenden Sie die JavaScript (EN)-Variante für Animationen, die von der Scrollposition, der Abfolge von Benutzerinteraktionen oder physikbasierten Easing-Funktionen abhängen, die der Generator nicht erzeugen kann.

Wann funktioniert ein CSS-Keyframe-Animationsgenerator nicht?

Ein Keyframe-Generator verarbeitet zeitbasierte Bewegungen mit einzelnen Elementen gut. Es kämpft in dem Moment, in dem eine Animation etwas über die Seite um sie herum wissen muss.

Wo ein Generator typischerweise zu kurz kommt:

• Scroll-verbundene Bewegung, bei der der Fortschritt an den Fortschritt des Benutzers gebunden ist und nicht an eine feste Dauer
• Sequenzieren über mehrere Elemente mit Abhängigkeiten, wie eine Karte, die darauf wartet, dass ihr Geschwister zuerst fertig sind
• Pfadmorphing oder echte Federphysik, die mehrere Male oszilliert, bevor sie sich absetzt (ein einzelner kubischer Bezier-Überschuss, wie die Spring-Option dieses Werkzeugs, ist das Maximum, das die meisten Generatoren erreichen)
• Automatische Handhabung von Bewegungseinstellungen

Scroll-getriebene Bewegung ist die deutlichste Lücke. CSS unterstützt es nun nativ über Animation-Timeline, und Chrome 145 fügte Scroll-triggerte Animationen (EN) im Jahr 2026 als weitere Erweiterung dieser Arbeit hinzu (Chrome für Entwickler).

Ein Generator, der um eine Zeitleiste mit fester Dauer herum gebaut wurde, hat keinen Schieberegler für „Ausführen, während der Benutzer scrollt.“ Diese Syntax liegt außerhalb dessen, was ein aktueller Keyframe-Generator exportiert.

Komplexe Sequenzierung stößt auf eine ähnliche Wand. Sobald die Animation eines Elements auf ein anderes ausgelöst, angehalten oder gewartet werden muss, kann das Single-Timeline-Modell eines Generators die Abhängigkeit nicht mehr ausdrücken.

Barrierefreiheit ist der leisere Fehlermodus. Ein Generator wird seine eigene Ausgabe niemals in eine Medienabfrage mit bevorzugter Bewegungsreduzierung einschließen, und dieser Schritt bleibt vollständig manuell.

Es zu überspringen ist kein kleiner Fehler. 36,2% der Erwachsenen im Alter von 40 bis 69 Jahren berichten über spezifische Gleichgewichts- und Schwindelprobleme, laut NHANES-Daten, die zwischen 2021 und 2023 gesammelt wurden (Laryngoscope, 2026), und uneingeschränkte Bewegung berührt genau die Gruppe, die die web accessibility (EN)-Anleitung zu Bewegung schützen soll.

Path-Morphing befindet sich im selben Bucket. Generatoren verarbeiten Transformationen und Interpolation von Eigenschaften, nicht die Punkt-für-Punkt-Pfaddaten, die ein echter Morph benötigt, so dass die Arbeit normalerweise stattdessen durch eine dedizierte SVG (EN) Animationsbibliothek geht.

Wie erstellt man eine CSS-Animation mit einem Keyframe-Generator?

Der Workflow ist kurz genug, um in wenigen Minuten durchlaufen zu werden, sobald Sie die Reihenfolge kennen.

1. Wählen Sie die zu animierenden Eigenschaften aus, normalerweise Transformation, Deckkraft oder Farbe.
2. Setzen Sie die Start- und End-Keyframe-Stopps auf 0 % und 100 %
3. Fügen Sie alle Zwischenstopps hinzu, die für einen Bounce-, Wobble- oder mehrstufigen Effekt erforderlich sind
4. Wählen Sie eine Dauer- und Erleichterungsfunktion und sehen Sie sich das Ergebnis live an
5. Legen Sie Verzögerung, Iterationszahl und Richtung fest, wenn ein einzelner Standarddurchlauf nicht das ist, was Sie benötigen
6. Exportieren Sie den Code, fügen Sie ihn in Ihr Stylesheet ein und wenden Sie dann den Animationsnamen auf das Zielelement an

Schritt drei ist, wo die meisten Menschen stecken bleiben. Wenn Sie von 0% auf 100% springen, ohne dazwischen zu stoppen, erzeugen Sie eine Bewegung, die flach aussieht, unabhängig davon, wie gut die Entspannungskurve ist.

Schritt sechs bringt die Leute auf eine andere Art und Weise nach oben. Der exportierte Animationsname ist oft generisch, und das Einfügen unter bestehende Regeln ohne Überprüfung auf einen Namenskonflikt kann etwas außer Kraft setzen, das bereits auf der Seite vorhanden ist.

Vor dem Versand, überprüfen Sie drei Dinge:

• Hält die Animation auch bei einer langsameren Verbindung oder niedrigeren Framerate durch?
• Kehrt das Element in einen sinnvollen Ruhezustand zurück, wenn die Animation endet?
• Muss eine Medienabfrage mit reduzierter Bewegung die gesamte Regel umschließen?

Diese letzte Kontrolle kommt selten vom Generator selbst. Du fügst sie nach dem Export hinzu, indem du die Animationskurzbezeichnung umschließt, sodass sie nur für Benutzer abgespielt wird, die nicht um weniger Bewegung gebeten haben:

@media (prefers-reduced-motion: no-preference) {
  .element { animation: fadeIn 1.5s ease both; }
}

Wie optimieren Sie generierte CSS-Animationen für die Performance?

Die Wahl der Eigenschaft entscheidet den größten Teil der Performance-Geschichte, bevor Dauer oder Lockerung jemals ins Spiel kommen.

Kennzahlen, die es zu wissen gilt:

• Nicht zusammengesetzte Animationen befinden sich im 90. Perzentil mit 13 pro Seite auf Desktop und 11 auf Mobilgeräten (HTTP Archive Web Almanac, 2025)
• Die Animation-Eigenschaft erscheint bereits auf 77% der mobilen Seiten und 76,8% der Desktop-Seiten (HTTP Archive Web Almanac, 2022)
• Die durchschnittliche Übergangsdauer im Web liegt bei nur 300ms (HTTP Archive Web Almanac, 2020)

Die erste Figur ist diejenige, die man beobachten sollte. Eine Handvoll schwerer Seiten enthält ein Dutzend oder mehr nicht zusammengesetzte Animationen, von denen jede eine Neuberechnung des Layouts für jeden Frame erfordert.

Chromes Lighthouse-Audit erfasst dies direkt und kennzeichnet die spezifischen animierten Eigenschaften, die unter der Überprüfung nicht zusammengesetzter Animationen verantwortlich sind.

Auch die Dauer spielt eine Rolle, wenn auch weniger dramatisch. Der 300-ms-Medianwert ist keine strenge Regel, aber wenn man bei einer dekorativen Animation weit über eine Sekunde hinausdriftet, wirkt das normalerweise eher träge als flüssig.

Wenn Sie mehrere Animationen auf derselben Seite gleichzeitig ausführen, wird die Summe auf eine andere Weise addiert. Jeder von ihnen hält den Komponisten aktiv, was die Batterie auf mobilen Geräten schneller entlädt, als es ein einzelner gut getimter Effekt jemals tun würde.

Welche häufigen Fehler treten bei der Verwendung von generiertem Keyframe-Code auf?

Die meisten Probleme mit dem generierten Keyframe-Code treten nach dem Export auf, nicht während des Designschritts im Tool.

Die Zeile mit den benutzerdefinierten Eigenschaften ist leicht zu übersehen, da sie stillschweigend fehlschlägt und keinen Fehler auslöst.

Animierte benutzerdefinierte Eigenschaften, wie sie Houdinis @property-Regel ermöglicht, werden immer noch auf einem winzigen Bruchteil der echten Seiten angezeigt: rund 1.030 Desktop-Seiten und 1.175 mobile Seiten aus dem gesamten HTTP-Archiv-Datensatz (Web Almanac, 2021).

@property selbst funktioniert jetzt in jedem gängigen Browser, seit Firefox es im Juli 2024 in Version 128 hinzugefügt hat. Die geringe Nutzung ist ein Zeichen dafür, dass die Technik nicht in großem Umfang kampferprobt wurde. Behandeln Sie sie daher als progressive Verbesserung und niemals als den einzigen Weg zu einem Effekt.

Für die Zeile mit reduzierter Bewegung erfasst das Ausführen eines Schnelldurchlaufs gegen eine Web-Zugänglichkeits-Checkliste (EN) die meisten Dinge, die der Export-Button eines Generators nicht erfassen kann.

Ein kleiner Fehler, den es zu melden gilt: das Einfügen von exportiertem Code ohne die Reihenfolge der Eigenschaften der Animationskürzel zu überprüfen.

Das Verwechseln von Dauer und Verzögerung in der Kurzschrift ist ein klassischer Fehler beim Kopieren und Einfügen, da es sich bei beiden um Zeitwerte handelt und der Browser Sie nicht warnt, wenn sie vertauscht werden.

Das Lesen der einzelnen Longhand-Eigenschaften anstelle der Shorthand beim Debuggen erfasst dies schneller als das Anstarren der kombinierten Zeile.

Häufige Fragen: CSS-Keyframe-Animationen erstellen

Was ist der Unterschied zwischen CSS Animation und CSS Transition?

Eine Überblendung bewegt sich zwischen zwei Zuständen, einem Anfang und einem Ende, ausgelöst durch eine Änderung wie z. B. den Hover.

Eine CSS-Animation läuft auf ihrer eigenen Zeitleiste durch @Keyframes, mit so vielen Zwischenstopps wie nötig, unabhängig von einem auslösenden Ereignis.

Ist ein CSS-Keyframe-Animationsgenerator kostenlos zu benutzen?

- Ja. - Ja. Die Kategorie läuft fast ausschließlich auf kostenlosen, werbefinanzierten oder Open-Source-Tools, da die Ausgabe nur statische CSS ohne Serververarbeitung ist.

Es gibt kostenpflichtige Animationssoftware, aber speziell für @Keyframes decken kostenlose Browser-Tools fast jeden gängigen Anwendungsfall ab.

Kann der generierte Keyframe-Code nach dem Export manuell bearbeitet werden?

Ja, und es braucht es normalerweise. Der exportierte Code ist einfaches CSS, sodass das Öffnen in jedem Editor genauso funktioniert wie das Bearbeiten von handgeschriebenen Keyframes.

Das Umbenennen der Animation, das Anpassen eines Stopps oder das Verändern des Timings führt nicht zur Sperrung des ursprünglichen Generators.

Können mehrere Keyframe-Animationen gleichzeitig auf demselben Element ausgeführt werden?

- Ja. - Ja. Liste mehrere Namen in der animation-name-Eigenschaft, durch Kommas getrennt, zusammen mit übereinstimmenden Werten in animation-duration und den anderen Untereigenschaften auf.

Jede Keyframe-Regel wird unabhängig auf demselben Element ausgeführt, wodurch kombinierte Effekte wie ein Spin und ein Fade erstellt werden.

Was sollten Sie zuerst mit einem CSS-Keyframe-Animationsgenerator beheben?

Ein CSS-Keyframe-Animationsgenerator verdient seinen Platz an erster Stelle bei der Eigenschaftsauswahl: Transformation und Deckkraft sorgen für Bewegung im Compositor-Thread, während Dauer, Kurvenoptimierung und Exportbereinigung zweitrangig bleiben, bis diese Auswahl festgelegt wird.

Wenn Sie zuerst die Eigenschaft korrigieren, dann das Timing anpassen und dann den Export bereinigen, verhindern Sie, dass die Ausgabe eines Generators unterbrochen wird, sobald der tatsächliche Inhalt die Vorschau ersetzt.

• Eigenschaftswahl: Transformieren oder Deckkraft über Breite oder oben
• Timing und Easing: gegen die Live-Vorschau abgestimmt, nicht erraten
• Exportbereinigung: Klassen umbenennen, Präfixe prüfen und den Code in eine Abfrage für prefers-reduced-motion einschließen

Das Festlegen der Eigenschaftsauswahl hat zunächst einen Preis: Eine spätere Anfrage zur reibungslosen Animation von Breite oder Farbe wird nicht im Compositor-Thread ausgeführt, was einen langsameren, Layout-auslösenden Fallback erzwingt.

Wenn ein Effekt über CSS-Eigenschaften hinaus auf Pixelebene gesteuert werden muss, ist der Wechsel von Keyframes zu Canvas-Animationen (EN) der nächste Schritt für interaktive Grafiken.