CSS-Animations-Generator - @keyframes-Builder kostenlos online

Erstellen Sie CSS-@keyframes-Animationen mit Live-Vorschau. Stellen Sie Dauer, Easing, Wiederholung, Richtung und benutzerdefinierte Von/Bis-CSS-Eigenschaftswerte ein

CSS-Werkzeuge

Tool

CSS Property to Animate

FromTo

Duration (1s)

TimingIterationsDirection

CSS

@keyframes anim_R_hbqav5ubqiudb_ {
  from { transform: translateX(0px); }
  to { transform: translateX(100px); }
}

.element {
  animation: anim_R_hbqav5ubqiudb_ 1s ease infinite alternate;
}

Anleitung

1Wählen Sie die zu animierende CSS-Eigenschaft (z. B. transform, opacity, background-color)
2Legen Sie die 'Von'- und 'Bis'-Werte für diese Eigenschaft fest
3Passen Sie Dauer, Timing-Funktion, Wiederholungsanzahl und Richtung an
4Beobachten Sie die Live-Vorschau Ihrer Einstellungen
5Kopieren Sie den vollständigen @keyframes- und Animations-CSS-Code und fügen Sie ihn in Ihr Stylesheet ein

Häufig gestellte Fragen

Die meisten CSS-Eigenschaften mit numerischen oder Farbwerten können animiert werden, darunter transform, opacity, background-color, width, height und font-size. Nicht animierbare Eigenschaften (wie display) werden nicht reibungslos interpoliert.

iteration-count steuert, wie oft die Animation abgespielt wird. Bei 'infinite' wird die Animation endlos wiederholt; bei einer Zahl wird sie entsprechend oft abgespielt.

alternate lässt die Animation bei ungeraden Durchläufen vorwärts und bei geraden Durchläufen rückwärts laufen. Dies erzeugt einen sanften Hin-und-her-Effekt ohne abrupte Sprünge.

Kopieren Sie den @keyframes-Block und die Animations-Kurzschreibweise. Fügen Sie die @keyframes zu Ihrer CSS-Datei hinzu und setzen Sie die Animations-Eigenschaft auf das Element, das Sie animieren möchten.

Anleitung

1Wählen Sie die zu animierende CSS-Eigenschaft (z. B. transform, opacity, background-color)

2Legen Sie die 'Von'- und 'Bis'-Werte für diese Eigenschaft fest

3Passen Sie Dauer, Timing-Funktion, Wiederholungsanzahl und Richtung an

4Beobachten Sie die Live-Vorschau Ihrer Einstellungen

5Kopieren Sie den vollständigen @keyframes- und Animations-CSS-Code und fügen Sie ihn in Ihr Stylesheet ein

Häufig gestellte Fragen

iteration-count steuert, wie oft die Animation abgespielt wird. Bei 'infinite' wird die Animation endlos wiederholt; bei einer Zahl wird sie entsprechend oft abgespielt.

alternate lässt die Animation bei ungeraden Durchläufen vorwärts und bei geraden Durchläufen rückwärts laufen. Dies erzeugt einen sanften Hin-und-her-Effekt ohne abrupte Sprünge.