CSS-Animationsgenerator (Keyframes)

Wählen Sie eine Animationsvorlage, passen Sie Dauer, Rhythmus und Wiederholung an, sehen Sie das Ergebnis live und kopieren Sie den vollständigen @keyframes-Code. 100% lokale Verarbeitung — nichts wird an einen Server gesendet.

Beispiel:

Animation

Dauer (s)

Zeitkurve

Verzögerung (s)

Wiederholung

CSS-Code

@keyframes fade-animation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.mon-element {
  animation: fade-animation 1.2s ease-in-out 0s infinite;
}

So funktioniert es

Die Regel @keyframes beschreibt den Zustand eines Elements bei verschiedenen Prozentsätzen der Animationsdauer, während die Eigenschaft animation diese Sequenz mit einer Dauer, einem Rhythmus und einer Wiederholungsanzahl an ein Element anhängt. Wählen Sie eine gebrauchsfertige Vorlage (Einblenden, Abprallen, Rotation...), passen Sie die Parameter an und übernehmen Sie den endgültigen Code mit seiner @keyframes-Regel und animation-Deklaration.

Wie wende ich diese Animation auf mein eigenes Element an?

Kopieren Sie die @keyframes-Regel unverändert in Ihr Stylesheet und ersetzen Sie dann den Selektor .mon-element durch die Klasse oder ID des HTML-Elements, das Sie animieren möchten.

Welche Zeitkurve sollte ich wählen?

ease-in-out eignet sich für die meisten Interface-Animationen, da sie sanft beginnt und endet; linear ist besser für eine kontinuierliche Rotation geeignet (wie ein Ladeindikator), während ease-out einen betont abrupten Ankunftseffekt erzeugt, der häufig für das Erscheinen von Elementen verwendet wird.

Der Code wird vollständig in Ihrem Browser generiert und in der Vorschau angezeigt, ohne Verbindung zu einem Server.