Zum Hauptinhalt springen
Uddatak

CSS-Keyframe-Animation-Generator

Der CSS-Keyframe-Animation-Generator lässt dich einen Animationstyp aus 12 vorgefertigten Stilen auswählen (Ein-/Ausblenden, Einschieben aus allen vier Richtungen, Hinein-/Herauszoomen, Hereinspringen, Hereindrehen, Umklappen um die X- oder Y-Achse), dann Dauer, Verzögerung, Timing-Funktion und Wiederholungsanzahl anpassen, mit Live-Vorschau und einer Wiederholen-Schaltfläche. Kopiere die vollständige @keyframes-Regel plus eine einsatzbereite Animationsklasse. Die gesamte Erzeugung erfolgt in deinem Browser — es wird niemals etwas an einen Server gesendet.

Design- und CSS-Tools Läuft vollständig in deinem Browser

Der Code wird vollständig in deinem Browser erzeugt — es wird niemals etwas an einen Server gesendet.

CSS-Code

@keyframes uddatakAnim {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.animated-box {
  animation: uddatakAnim 800ms ease-out 0ms 1;
}

Häufig gestellte Fragen

Ja, @keyframes und die animation-Eigenschaft werden in jedem modernen Browser unterstützt, ohne spezielle Herstellerpräfixe.

Weiter mit

Vollständig lokal

Cubic-Bezier-Easing-Generator

Ziehe zwei Punkte, um eine eigene Bewegungs-Easing-Kurve zu gestalten, und kopiere den cubic-bezier-Code.

Design- und CSS-ToolsTool öffnen
Vollständig lokal

CSS-Verlaufsgenerator

Erstellen Sie visuell einen linearen oder radialen CSS-Verlauf und kopieren Sie den Code.

Design- und CSS-ToolsTool öffnen
Vollständig lokal

CSS-Clip-Path-Generator

Wähle eine fertige Form (Kreis, Dreieck, Stern, Sprechblase...) und kopiere den clip-path-CSS-Code.

Design- und CSS-ToolsTool öffnen

Ähnliche Tools

Vollständig lokal

Farbpaletten-Harmonie-Generator

Wähle eine Grundfarbe und erhalte eine harmonische Farbpalette (komplementär, analog, triadisch, tetradisch, monochromatisch).

Design- und CSS-ToolsTool öffnen
Vollständig lokal

Mesh-Gradient-Generator

Erstelle mit einem Klick einen weichen Mesh-Gradient-Hintergrund mit mehreren Farbpunkten und kopiere fertigen CSS-Code.

Design- und CSS-ToolsTool öffnen
Vollständig lokal

Farbkontrast-Prüfer

Prüfen Sie, ob ein Text-/Hintergrundfarbpaar die WCAG-Barrierefreiheits-Kontraststandards erfüllt.

Design- und CSS-ToolsTool öffnen
Vollständig lokal

CSS-Verlaufsgenerator

Erstellen Sie visuell einen linearen oder radialen CSS-Verlauf und kopieren Sie den Code.

Design- und CSS-ToolsTool öffnen
Vollständig lokal

CSS Box-Shadow-Generator

Gestalten Sie einen CSS-box-shadow visuell mit Reglern und kopieren Sie den generierten Code.

Design- und CSS-ToolsTool öffnen

Bereit, Uddatak auszuprobieren?

Durchsuchen Sie die vollständige Tool-Bibliothek und beginnen Sie jetzt, was Sie brauchen — kostenlos, keine Anmeldung.

Alle Tools durchsuchen