CSS-Animations-Generator
Keyframe-Animationen wie Fade, Bounce oder Slide in der Vorschau ansehen und als CSS erzeugen
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Sieh dir gängige Animationen wie Fade, Slide, Zoom, Bounce, Pulse, Shake und Rotation in Echtzeit an und kopiere fertiges CSS samt @keyframes und animation-Eigenschaften. Stellst du Dauer, Verzögerung, Easing und Wiederholungen per Regler ein, ändert sich der Code sofort.
Anleitung
- Wähle im Reiter die Animationsart wie Fade oder Bounce.
- Passe Dauer, Verzögerung, Easing (timing) und Wiederholungen an und prüfe das Ergebnis in der Vorschau.
- Mit „Erneut abspielen" siehst du es jederzeit von vorne.
- Kopiere das CSS unten und wende es über die Klasse .element auf das gewünschte Element an.
FAQ
- Wie verwende ich das kopierte CSS?
- Füge die @keyframes-Definition in dein Stylesheet ein und gib dem zu animierenden Element die Klasse .element. Den Klassennamen kannst du beliebig ändern.
- Wie bleibt der Zustand vor dem Start und nach dem Ende erhalten?
- Am Ende des erzeugten Shorthands steht bereits both (animation-fill-mode: both), sodass vor dem Abspielen der erste und nach dem Ende der letzte Frame gehalten wird.
- Ich möchte die Animation nur abspielen, wenn das Element sichtbar ist.
- Erkenne das Einscrollen mit einem IntersectionObserver und füge dann die Klasse .element hinzu. Das von diesem Tool erzeugte CSS besteht aus Standard-Eigenschaften und funktioniert direkt, die eigentliche Trigger-Logik fügst du aber selbst im Projekt hinzu – das ist nur Referenzcode.