CSS-Werkzeuge/CSS-Animations-Builder
CSS-Animations-Builder
Erstellen Sie beeindruckende CSS Keyframe-Animationen mit interaktivem Timeline-Editor
Vorschau
Box
Einstellungen
1s
0s
Presets
Timeline
Keyframe bei 0%
Keyframe bei 50%
Keyframe bei 100%
CSS-Code
Loading...Animations-Generator Anleitung
Erstellen Sie fesselnde CSS-Animationen mit Keyframes
Was ist CSS-Animation?
CSS-Animationen ermöglichen sanfte Übergänge zwischen Stilen über die Zeit. Mit Keyframes können Sie komplexe Animationssequenzen erstellen, die Eigenschaften wie Position, Größe, Farbe und Deckkraft steuern.
Verwendung
- Definieren Sie Keyframes mit Start- und Endstilen
- Stellen Sie Dauer und Timing-Funktion ein
- Konfigurieren Sie Wiederholungsanzahl und Richtung
- Vorschau ansehen und CSS-Code kopieren
Profi-Tipps
- Verwenden Sie ease-in-out für natürliche Bewegung
- Testen Sie Animationen mit verschiedenen Geschwindigkeiten
- Kombinieren Sie transform und opacity für beste Leistung
Browser-Unterstützung
CSS-Animationen werden in allen modernen Browsern weitgehend unterstützt. Für ältere Browser können Sie @keyframes-Präfixe hinzufügen.
Häufig gestellte Fragen
Was ist der Unterschied zwischen CSS-Animationen und Transitions?
Transitions animieren die Änderung zwischen zwei Zuständen und erfordern einen Auslöser wie Hover. Animationen können mit @keyframes mehrere Schritte definieren, automatisch starten, unendlich wiederholen und komplexere Bewegungen erzeugen. Verwenden Sie Transitions für einfache Zustandsänderungen und Animationen für komplexe Sequenzen.
Wie erstelle ich eine unendlich wiederholende Animation?
Verwenden Sie animation-iteration-count: infinite, um die Animation unendlich zu wiederholen. In der Kurzform: 'animation: myAnimation 2s infinite;'. Wenn Sie die Richtung auf alternate setzen, erhalten Sie einen sanften Hin-und-Her-Effekt.
Was ist fill-mode und warum ist es wichtig?
animation-fill-mode bestimmt, wie Stile vor und nach der Animation angewendet werden. 'forwards' behält den Endzustand nach der Animation bei, 'backwards' wendet den Startzustand während der Verzögerung an. 'both' wendet beide Effekte an.
Wie optimiere ich die Animationsleistung?
Animieren Sie nur transform und opacity für GPU-Beschleunigung und bessere Leistung. Width, height, top, left verursachen Reflows und beeinträchtigen die Leistung. Die will-change-Eigenschaft kann dem Browser Hinweise geben, aber übermäßige Verwendung kann kontraproduktiv sein.
Kann ich Animationen ohne JavaScript steuern?
Mit animation-play-state: paused können Sie Animationen nur mit CSS pausieren. Ändern Sie diese Eigenschaft bei :hover oder :focus für benutzergesteuerte Interaktionen. Für präzisere Steuerung verwenden Sie die Web Animations API von JavaScript.