# CSS-Animation-Generator

Generiert CSS-Animation-Keyframes und Eigenschaften

> Kanonische Seite: https://elysiatools.com/de/tools/animation-generator

- **Kategorie:** Design

- **Schlagwörter:** css, animation, keyframes, transformation, generator, stil

## Überblick

Erstellen Sie mit diesem CSS-Animation-Generator schnell und präzise Keyframes sowie die passenden CSS-Eigenschaften für Ihre Webprojekte.

## Eingaben

- **Animationsname** (text): myAnimation
- **Animationstyp** (select)
- **Dauer (s)** (number): Animation duration
- **Timing-Funktion** (select)
- **Verzögerung (s)** (number): Animation delay
- **Iterationsanzahl** (select)
- **Richtung** (select)
- **Füllmodus** (select)

## Wann verwenden

- Wenn Sie komplexe Animationen ohne manuelles Schreiben von Keyframes benötigen.
- Um konsistente Übergänge wie Einblenden, Gleiten oder Skalieren zu implementieren.
- Zur schnellen Prototypenerstellung von UI-Interaktionen direkt im Browser.

## Funktionsweise

- Wählen Sie den gewünschten Animationstyp aus, z. B. 'fade' oder 'bounce'.
- Passen Sie Parameter wie Dauer, Verzögerung und Timing-Funktion an Ihre Bedürfnisse an.
- Konfigurieren Sie die Iterationsanzahl und den Füllmodus für das gewünschte Verhalten.
- Kopieren Sie den generierten CSS-Code direkt in Ihr Stylesheet.

## Anwendungsfälle

- Erstellung von sanften Einblendeffekten für Webseiten-Elemente beim Laden.
- Implementierung von aufmerksamkeitsstarken Bounce-Effekten für Call-to-Action-Buttons.
- Entwicklung von komplexen Rotations- oder Skalierungsanimationen für interaktive Grafiken.

## Häufig gestellte Fragen

### Welche Animationstypen werden unterstützt?

Der Generator unterstützt Einblenden (fade), Gleiten (slide), Skalieren (scale), Drehen (rotate) und Hüpfen (bounce).

### Kann ich die Dauer der Animation anpassen?

Ja, Sie können die Dauer in Sekunden zwischen 0,1 und 60 Sekunden frei wählen.

### Was bewirkt der Füllmodus?

Der Füllmodus bestimmt, welche Stilelemente das Element vor und nach der Animation beibehält, z. B. 'forwards' für den Endzustand.

### Ist der generierte Code für alle Browser geeignet?

Der Generator erstellt standardkonformen CSS-Code, der in allen modernen Webbrowsern funktioniert.

### Kann ich Animationen unendlich wiederholen lassen?

Ja, wählen Sie dazu einfach die Option 'infinite' unter der Iterationsanzahl aus.

## Ähnliche Tools

- [CSS-Transform-Generator](https://elysiatools.com/de/tools/transform-generator): Generiert CSS-Transform-Eigenschaften
- [CSS-Hintergrundfilter-Generator](https://elysiatools.com/de/tools/backdrop-filter-generator): Generiert CSS-Hintergrundfilter-Eigenschaften für Milchglas-Effekte
- [CSS-Randradius-Generator](https://elysiatools.com/de/tools/border-radius-generator): Generiert CSS-Randradius-Eigenschaften
- [CSS-Box-Shadow-Generator](https://elysiatools.com/de/tools/box-shadow-generator): Generiert CSS-Box-Shadow-Eigenschaften
- [CSS-Clip-Path-Generator](https://elysiatools.com/de/tools/clip-path-generator): Generiert CSS-Clip-Path-Eigenschaften für benutzerdefinierte Formen
- [CSS-Filter-Generator](https://elysiatools.com/de/tools/css-filter-generator): Generiert CSS-Filter-Eigenschaften
- [Farbverlaufs-Generator](https://elysiatools.com/de/tools/color-gradient-generator): Erzeugt weiche Farbverläufe zwischen mehreren Farben mit anpassbaren Schritten und Formaten
- [Geteiltes Komplementär-Farbwerkzeug](https://elysiatools.com/de/tools/color-split-complement): Harmonischen Kontrast mit geteilten komplementären Farbschemata unter Verwendung einer Grundfarbe und zwei benachbarten Farben zu ihrem Komplement erstellen

## Beispiele

- [CSS-Beispiele](https://elysiatools.com/de/samples/css-viewer-samples): Beispieldateien fuer den Browser-basierten CSS-Viewer
- [Web Python Bildverarbeitung Beispiele](https://elysiatools.com/de/samples/web-image-processing-python): Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung
- [Bulma CSS Framework Beispiele](https://elysiatools.com/de/samples/bulma): Bulma CSS-Framework-Beispiele einschließlich Spalten, Komponenten, Formular-Steuerelemente, Layout-System und moderne CSS-basierte Design-Muster
- [CSS-Selektor-Beispiele](https://elysiatools.com/de/samples/css-selectors): Sammlung von CSS-Selektor-Beispielen für Extraktions- und Analysetests