Die Seite startet mit @keyframes kivMotion, 1400 ms, ease, einer Wiederholung und Keyframes bei 0 %, 50 % und 100 %, und jeder Keyframe trägt eigene Position, Verschiebung, Drehung, Skalierung und Deckkraft. Die Vorschau spielt dieselbe animation-Kurzform ab, die das Ausgabefeld ausgibt, und beide Blöcke werden nach Position sortiert geschrieben.
Läuft lokal in deinem BrowserDie Seite startet als @keyframes kivMotion mit 1400 ms, ease, einer Wiederholung und Keyframes bei 0%, 50% und 100%. Die Vorschau nutzt dieselbe animation-Kurzform, die das Ausgabefeld ausgibt: Was Sie abspielen, ist das, was Sie kopieren.
Jedes Zahlenfeld hat eine gemessene Grenze: Dauer 100-20000 ms, Position 0-100%, Deckkraft 0-1, Verschiebung ±300 px, Drehung ±720°, Skalierung 0-4 und zwei bis acht Keyframes. Ein Wert außerhalb der Grenze wird beim Verlassen des Feldes auf die Grenze zurückgeschrieben; ein leeres Feld stellt den vorherigen Wert wieder her, statt auf null zu springen.
Die Ausgabe enthält die @keyframes-Regel mit einem Block je Keyframe, nach Position sortiert, gefolgt von der .animated-element-Deklaration. Die Blöcke werden nach Position ausgegeben, auch wenn die Keyframes in anderer Reihenfolge angelegt wurden; die Liste behält Ihre Reihenfolge und zeigt die Position bei jedem Eintrag.
Die Kurzform lautet animation: <Name> <Dauer>ms <Zeitfunktion> 0ms <Wiederholungen> both. Zwei Keyframes dürfen dieselbe Position teilen: beide Blöcke werden exportiert, der spätere mit demselben Prozentwert steht zuletzt.
Keyframe hinzufügen teilt die größte Lücke und rundet den Mittelpunkt: Aus den drei Startwerten entstehen nacheinander 25, 75, 13, 38 und 63% (Endliste 0, 13, 25, 38, 50, 63, 75, 100). Bei acht Keyframes ist Hinzufügen deaktiviert; bei zwei meldet Entfernen, dass mindestens zwei Keyframes nötig sind.
Die Grenzen greifen beim Verlassen des Feldes: 150 wird als 100 gespeichert, -50 als 0, Deckkraft 3 als 1, Skalierung 5 als 4, translate 400px als 300px und rotate 900deg als 720deg. Ein geleertes Feld stellt den vorherigen Wert wieder her. Liste, Zeitleiste und Ausgabe tragen immer die gespeicherten Zahlen, sodass ein Keyframe bei 150% nicht mehr vom CSS-Parser verworfen wird.
Pro Keyframe werden nur transform und opacity animiert: keine Farbe, kein Filter und kein Hintergrund je Keyframe, keine Steuerung für animation-delay, direction, fill oder play-state, und die exportierte Klasse ist immer .animated-element. Alles läuft in der Seite - das Bedienen der Regler sendet keine Netzwerkanfrage.
Die Beschleunigung kommt aus dem Menü; der Eintrag overshoot gibt cubic-bezier(0.34, 1.56, 0.64, 1) aus statt des Wortes. Es gibt kein Ziehen auf der Zeitleiste, keinen GIF- oder Videoexport und kein zweites Element zum Vergleich; doppelte Positionen sind erlaubt und beide Blöcke werden exportiert.