Verwendet der Generator externe Bibliotheken?

Nein. Er gibt reine CSS-Keyframes und „animation“-Eigenschaften aus, die nativ in allen modernen Browsern ohne Abhängigkeiten funktionieren.

Was ist der Unterschied zwischen ease-in und ease-out?

Die Funktion „ease-in“ startet die Animation langsam und beschleunigt am Ende, während „ease-out“ schnell beginnt und am Ende abbremst.

Kann ich jede CSS-Eigenschaft animieren?

Das Tool konzentriert sich auf die gängigsten animierbaren Eigenschaften wie „transform“, „opacity“ und „background-color“. Diese Eigenschaften sind in der Regel performanter, da sie keine Neuberechnungen des Browser-Layouts auslösen.

Wie lasse ich eine Animation unendlich oft wiederholen?

Setzen Sie die Eigenschaft „animation-iteration-count“ auf „infinite“. Dies ist eine Standardoption im Konfigurationspanel für Dauer und Timing.

Farbe & Design

CSS Animationsgenerator

Build keyframes visually, copy ready-to-paste CSS.

Runs in your browser

PresetDuration800msDelay0msTiming functionIterations

preview

CSS

@keyframes ac-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ac-fade {
  animation: ac-fade 800ms ease-out 0ms 1 both;
}

Anmerkung der Redaktion

Understanding · Keyframes, timing, and what runs on the GPU.

Dieses ausführliche Kapitel ist derzeit nur auf Englisch verfügbar. Das Konvertierungstool oben funktioniert in Ihrer Sprache; der lange Erklärtext wurde noch nicht übersetzt.

Häufig gestellte Fragen

Quick answers.

›Does the generator use external libraries?

No. It outputs pure CSS keyframes and `animation` properties that work natively in all modern browsers without any dependencies.

›What is the difference between ease-in and ease-out?

The `ease-in` function starts the animation slowly and speeds up at the end, while `ease-out` starts quickly and decelerates at the end.

›Can I animate any CSS property?

The tool focuses on the most common animatable properties like `transform`, `opacity`, and `background-color`. These properties are generally more performant as they avoid triggering browser layout recalculations.

›How do I make an animation loop forever?

Set the `animation-iteration-count` property to `infinite`. This is a standard option in the duration and timing configuration panel.

Andere suchten auch nach

Verwandte Tools

More in this room.

Alle anzeigen in Farbe & Design