LocalToolsSammlung offline nutzbarer Browser-Tools

Kategorie: Entwicklung

CSS-Keyframes-Generator

Eigene IdeeTool fehlt?

Eine Animations-Voreinstellung wählen und den @keyframes-Block kopieren

Wählen Sie eine Voreinstellung für Einblenden, Einschieben, Hüpfen, Pulsieren oder Drehen, legen Sie Dauer, Timing-Funktion, Wiederholungsanzahl und Richtung fest und kopieren Sie den vollständigen @keyframes-Block samt der animation-Kurzschreibweise, die ihn verwendet, mit Live-Vorschau.

Ausgabe
@keyframes localtools-preview {
  from {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-24px);
  }

  60% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(-12px);
  }

  to {
    transform: translateY(0);
  }
}

.element {
  animation: localtools-preview 1.2s ease-in-out infinite normal;
}

Die Vorschau startet neu, sobald Sie die Voreinstellung ändern, mit exakt dem unten gezeigten CSS.

Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.

Wozu dieses Werkzeug dient

Einen @keyframes-Block von Hand zu schreiben bedeutet, Prozent-Haltepunkte zu benennen und an jedem die Eigenschaftswerte so festzulegen, dass sie wie erwartet interpolieren – bei etwas wie einem Hüpfen mit mehreren Haltepunkten ist das leicht subtil falsch zu machen. Dieses Werkzeug bringt eine Handvoll gängiger Animationsformen als fertige Haltepunktlisten mit und lässt Sie die Timing-Regler einstellen, die die Keyframes selbst nicht verändern, sodass die Vorschau immer exakt zum darunterliegenden CSS-Block passt.

So funktioniert es

  1. Wählen Sie eine Animations-Voreinstellung.
  2. Legen Sie Dauer, Timing-Funktion, Wiederholungsanzahl und Richtung fest.
  3. Kopieren Sie den @keyframes-Block und die animation-Kurzschreibweise darunter.

Datenschutz

Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.

Häufig gestellte Fragen

Warum startet die Vorschau neu, wenn ich die Voreinstellung ändere?
Ein Wechsel der Voreinstellung tauscht die zugrunde liegenden @keyframes-Haltepunkte aus, sodass das Vorschauelement neu eingebunden wird, um sicherzustellen, dass die laufende Animation zu der eben erzeugten passt, statt eine veraltete zu Ende laufen zu lassen.
Was bewirkt die Wiederholungsanzahl "infinite"?
Sie wiederholt die Animation endlos, was die Vorschau standardmäßig verwendet; legen Sie stattdessen eine Zahl fest, wenn sie eine feste Anzahl von Malen abspielen und dann anhalten soll.
Wird etwas an einen Server gesendet?
Nein. Der @keyframes-Block und die animation-Kurzschreibweise werden auf der Seite aus Ihrer Voreinstellung und den Timing-Einstellungen erzeugt, weshalb sich die Vorschau sofort aktualisiert.

Zurück zu allen Werkzeugen