CSS-Keyframes-Builder — @keyframes und Easing-Kurven visuell erstellen
Baue @keyframes-Animationen mit Bewegung, Rotation und Skalierung und gestalte das Easing auf einer visuellen Cubic-Bezier-Timeline
Erstelle Bounce-, Fade- und Shake-Animationen mit CSS `@keyframes` per Schieberegler und kopiere den fertigen Code direkt heraus.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Passe Animationsname, Dauer, Y-Achsen-Bewegung und Skalierungswert an.
- Sieh dir die Box-Animation live an und kopiere den generierten CSS-Code.
FAQ
- Wie setze ich das in HTML ein?
- Füge einfach die kopierte `@keyframes`-Regel und die Klassen-CSS in das Stylesheet deiner Website ein.
- Kann ich die cubic-bezier-Easing-Kurve selbst anpassen?
- Ja — zieh die Kontrollpunkte im Timeline-Graphen, um Beschleunigung und Verzögerung genau nach deinen Wünschen zu formen; die Werte landen direkt im generierten CSS.
- Kann ich Endlosschleifen oder Rückwärts-Wiedergabe einstellen?
- Ja — stelle die Wiederholungsanzahl (auch unendlich) und die Alternate/Rückwärts-Option ein, und die passenden Werte für animation-iteration-count und animation-direction werden automatisch erzeugt.