Wie baue ich eine CSS-Animation, ohne @keyframes auswendig zu lernen?
@keyframes ist die deklarative Art, in CSS zu animieren. Du definierst ein paar Keyframes (0%, 50%, 100% oder mehr), gibst jedem einen Satz CSS-Werte (transform, opacity, color), und der Browser interpoliert sanft dazwischen. Das Ergebnis ist butterweiche 60fps-Bewegung ohne JavaScript.
Hier bekommst du einen visuellen Editor. Klick ein Preset (Fade-in, Slide, Bounce, Shake, Pulse, Spin) oder füg eigene Keyframes hinzu. Jedes Frame hat eigene X/Y-Translate, Scale, Rotation, Opacity und Farbe. Darunter gibt es eine Live-Vorschau, die sich aktualisiert, während du Parameter änderst.
Das Seiten-Panel setzt die Globals: Dauer, Easing, Iteration Count, Direction (normal / alternate), Fill-Mode. Klick "Kopieren" und du bekommst das volle CSS: einen `@keyframes`-Block plus eine Klasse mit `animation: ...`.
So nutzt du es
- Klick ein Preset (Fade-in, Slide, Bounce, Pulse, Spin) aus der Galerie unten. Jedes gibt dir 2-5 fertige Keyframes.
- Rechts siehst du die Keyframe-Liste (0% / 50% / 100%, usw.). Klick ein Frame, um seine Eigenschaften zu bearbeiten.
- Schieberegler: translate X/Y, scale (1 = original, 0,5 = klein, 2 = groß), rotate in Grad, opacity 0-1, background-color.
- Dauer (100-5000ms), Easing (linear, ease, cubic-bezier), Iterations (1, infinite), Direction (alternate = hin und zurück).
- Kopier das CSS, füg es in ein Stylesheet ein und gib deinem Element die `.target`-Klasse. Die Animation startet automatisch.
Wann das hilft
Mikro-Interaktionen sind das, was Premium-UI von billiger UI unterscheidet. Eine 200-400ms-Animation beim Hover, Klick oder Reveal lässt eine Seite lebendig wirken:
- Fade-in beim Scrollen. Element erscheint, wenn es ins Viewport rutscht, plus ein kleiner Translate nach oben = Inhalt, der "reinrutscht".
- Pulse auf einem CTA-Button. Ein sanft pulsierender Call-to-Action zieht das Auge an, ohne zu nerven (`pulse` infinite, alternate).
- Shake bei Formular-Validierungsfehlern. Passwortfeld wackelt 300ms beim Falscheingeben = klares visuelles Feedback.
- Bounce bei Toast-Notifications. Ein kleiner Hüpfer, wenn der Toast reinkommt.
- Spin-Loader. Der klassische Spinner während du auf eine Server-Antwort wartest (`spin` infinite linear).
- Slide-in Mobile-Menü. Hamburger-Menü rutscht von rechts rein.
- Hero-Farbwechsel. Hintergrundverlauf wechselt durch Farben, gibt das Premium-Fintech-Feeling.
Für eigene Easing-Kurven sieh den Cubic-Bezier-Generator. Für weitere visuelle Effekte sieh Box-Shadow und Clip-Path.