CSS-Animationsgenerator
Erstellen Sie CSS-Animationen (@keyframes) intuitiv.
Unterstützt 12 Presets, Parameteranpassung und Echtzeit-Vorschau.
Animations-Einstellungen
CSS-Code Ausgabe
Über den CSS Animation Generator
Dieser "CSS Animation Generator" ist ein kostenloses Tool, mit dem Sie Animationsbewegungen mit CSS @keyframes visuell überprüfen und den erforderlichen CSS-Code automatisch generieren können. Er enthält 12 Arten von Basis-Animationen (Presets) wie Fade-in, Slide, Scale und Bounce.
Sie können Eigenschaften wie Dauer (Sekunden), Verzögerung, Easing, Wiederholungen und Fill Mode intuitiv über Schieberegler und Dropdown-Menüs anpassen und in Echtzeit im Vorschaubereich überprüfen.
Nach der Anpassung kopieren Sie einfach den generierten CSS-Code und fügen ihn direkt in Ihr Projekt ein. Die gesamte Verarbeitung erfolgt in Ihrem Browser, ohne Kommunikation mit externen Servern, sodass die Nutzung absolut sicher ist.
Schritte zur Erstellung von CSS-Animationen
Basisbewegung auswählen
Wechseln Sie zunächst zu Tabs wie "Verblassen" oder "Gleiten" und wählen Sie ein Preset aus, das Ihrer gewünschten Animation entspricht.
Parameter anpassen
Ändern Sie die Dauer, Verzögerung und Easing-Geschwindigkeit mit den Schiebereglern und prüfen Sie die tatsächliche Bewegung im rechten Vorschaubereich.
CSS-Code kopieren
Wenn die Bewegung fertig ist, klicken Sie im Ausgabebereich auf "Code kopieren" und fügen Sie ihn in Ihre CSS-Datei ein.
CSS-Animations-Glossar (Eigenschaften)
animation-duration(Duration)- Gibt die Abspielzeit (Zeit bis zum Abschluss) einer Animations-Wiederholung an. Angegeben in Sekunden (s) oder Millisekunden (ms).
animation-timing-function(Easing)- Gibt die Geschwindigkeitskurve (Beschleunigung/Verlangsamung) der Animation an. Beispiele sind "linear" für konstante Geschwindigkeit und "ease-in-out" für einen sanften Start und ein sanftes Ende.
animation-delay(Delay)- Gibt die Wartezeit (Verzögerung) vor dem Start der Animation an.
animation-iteration-count(Iterations)- Gibt an, wie oft die Animation wiederholt wird. Die Angabe "infinite" wiederholt sie endlos.
animation-direction(Direction)- Gibt die Abspielrichtung der Animation an. "reverse" für Rückwärtswiedergabe und "alternate", bei der ungerade Vorwärts und gerade Rückwärts laufen.
animation-fill-mode(Fill Mode)- Legt fest, wie der Stil (Zustand) des Elements vor und nach der Animation beibehalten wird. Bei "forwards" bleibt der Stil am Ende der Animation erhalten.
transition-property(Property)- transition を適用するプロパティ名 (例: transform, opacity, all)。
transition-duration(Duration)- transition が完了するまでの時間。
transition-timing-function(Easing)- transition の速度変化のカーブ (Easing)。
Häufig gestellte Fragen (FAQ) zu CSS-Animationen
- Q.Was ist der Unterschied zwischen CSS-Animation und Transition?
transitioninterpoliert zwischen zwei Zuständen, ausgelöst durch eine Änderung (z. B. hover).animationwird automatisch ohne Auslöser abgespielt und ermöglicht eine feine Definition von Zwischenzuständen mit @keyframes.- Q.Welche Animationen haben die beste Leistung?
- Animationen mit
transform(translate, scale, rotate) undopacitysind durch Hardwarebeschleunigung schnell. Animationen aufwidth,heightodermarginverursachen ein Browser-Reflow und sind langsamer. - Q.Was ist prefers-reduced-motion?
- Es ist eine Medienabfrage (Media Query) für Benutzer, denen bei Animationen übel wird. Es wird empfohlen,
@media (prefers-reduced-motion: reduce)zu verwenden, um diese aus Gründen der Barrierefreiheit zu deaktivieren oder zu reduzieren. - Q.Ist animation-fill-mode forwards zwingend erforderlich?
- Bei Animationen wie fade-in kehrt das Element ohne
forwardsam Ende in seinen ursprünglichen Zustand (z. B. opacity: 0) zurück. Es ist erforderlich, wenn der Stil des letzten Frames auf dem Bildschirm beibehalten werden soll. - Q.Werden meine Daten an einen Server gesendet?
- Nein. Die gesamte Verarbeitung findet lokal in Ihrem Browser statt und es werden keine Daten nach außen gesendet.
Anwendungsfälle für CSS-Animationen
Seitenlade-Animationen
Implementieren Sie ein Fade-in, bei dem Inhalte sanft erscheinen, oder ein Slide-in von unten, um den ersten Eindruck der Seite zu verbessern.
Hervorheben von Schaltflächen und CTAs
Wenden Sie Animationen wie Pulse (Pulsieren) oder Bounce (Hüpfen) auf Konversions-Buttons an, um den Blick des Nutzers auf natürliche Weise zu lenken.
Scroll-gesteuerte Animationen
Kombinieren Sie die Intersection Observer API mit den generierten CSS-Animationsklassen, um Effekte zu erstellen, die abgespielt werden, sobald ein Element sichtbar wird.
Lade-/Warte-Benutzeroberflächen
Implementieren Sie endlos rotierende oder blinkende Ladeanimationen als Feedback, während Daten abgerufen oder ein Formular gesendet wird.
Feedback senden
Bitte teilen Sie uns Ihre Gedanken mit, um das Tool zu verbessern.
Feedback ist vorübergehend ausgesetzt
Der Server ist ausgelastet oder der Spam-Schutz ist aktiv. Bitte versuchen Sie es später erneut.