Über den CSS-Animationsgenerator
Konfigurieren Sie den Namen, die Dauer, die Beschleunigung, die Anzahl der Iterationen und die Reisedistanz. Das Tool gibt @keyframes sowie eine Utility-Klasse mit einer Live-Vorschau aus.
Wie man es benutzt
- 1Benennen Sie die AnimationVerwenden Sie einen kurzen, beschreibenden Klassennamen.
- 2Timing festlegenDauer und Beschleunigung steuern, wie sich die Bewegung anfühlt.
- 3Kopieren Sie das CSSFügen Sie die Keyframes und die Klasse in Ihr Stylesheet ein.
Warum diesen css-animationsgenerator verwenden?
- Nichts verlässt Ihr Gerät. Die Arbeit geschieht in Ihrem Browser-Tab. In dieser App gibt es keinen Upload-Endpunkt, sodass Ihre Dateien und Texte von uns nicht gespeichert, protokolliert oder eingesehen werden können.
- Keine Upload-Wartezeit. Sie überspringen den Hin- und Rückweg zu einem Server vollständig. Die Ergebnisse werden durch Ihre eigene CPU begrenzt, nicht durch die Netzwerkgeschwindigkeit oder die Warteschlangengröße.
- Kostenlos, kein Konto, keine Kontingente. Keine Anmeldewand, kein Wasserzeichen, kein Tageslimit. Optionale Konten existieren nur, um Favoriten und Voreinstellungen geräteübergreifend zu speichern.
Häufig gestellte Fragen
Ist die Verwendung meines CSS hier sicher?
Ja. Dieses Tool läuft vollständig in Ihrem Browser und verwendet JavaScript. Nichts, was Sie einfügen oder öffnen, wird an einen Server gesendet und die Seite behält keine Kopie, nachdem Sie sie geschlossen haben.
Muss ich ein Konto erstellen?
Nein. Jedes Tool ist ohne Anmeldung vollständig nutzbar. Ein Konto fügt nur gespeicherte Favoriten und wiederverwendbare Voreinstellungen hinzu.
Funktioniert es auf einem Telefon?
Ja. Die Benutzeroberfläche ist „Mobile First“ mit großen Touch-Zielen und einem gestapelten Layout, sodass sie sowohl auf Telefonen und Tablets als auch auf Desktops funktioniert.
Wie respektiere ich reduzierte Bewegung?
Wickeln Sie die Animation in @media ein (prefers-reduced-motion: no-preference) oder stellen Sie eine Override-Funktion für reduzierte Bewegungen bereit, die sie deaktiviert.
Warum startet die Vorschau neu?
Durch das Ändern einer Einstellung wird die Klasse neu erstellt, wodurch die Animation neu gestartet wird, sodass Sie das neue Timing sehen können.