Build a CSS keyframe animation and copy the exact @keyframes rule

The page opens as @keyframes kivMotion at 1400 ms, ease, one iteration, with frames at 0%, 50% and 100%, and every frame carries its own offset, translate, rotate, scale and opacity. The preview replays the same animation shorthand the export panel prints, and the two exported blocks are written in offset order.

Runs locally in your browser

View category: Frontend & Design (34)

· @keyframes · animation · timing

CONTROL RACK

animation-timing-function

animation-iteration-count

opacity

translateX (px)

translateY (px)

rotate (deg)

scale

LIVE STAGE

EXPORT CSS

How to shape a keyframe animation and read the CSS you copy

The page opens as @keyframes kivMotion at 1400 ms, ease, one iteration, with frames at 0%, 50% and 100%. The preview chip runs the same animation shorthand the export panel prints, so what you replay is what you copy.

Every numeric control has a measured bound: duration 100-20000 ms, offset 0-100%, opacity 0-1, translate ±300 px, rotate ±720°, scale 0-4 and two to eight frames. A value typed outside its bound is written back to the limit when the field loses focus; an empty field restores the previous value instead of switching to zero.

Name the animation. Letters, digits, - and _ survive, every other character becomes -, and the field holds 40 characters. The readout shows the identifier the export actually uses (my animation! is stored as my-animation, 动画 falls back to kivMotion).

Set the duration and pick the timing and iteration count. Duration is clamped to 100-20000 ms on commit; the menus offer ease, linear, ease-in, ease-out, ease-in-out or the overshoot preset cubic-bezier(0.34, 1.56, 0.64, 1), and 1, 2, 3 or infinite repeats.

Choose a frame in the list, then edit its offset, opacity, translateX/Y, rotate and scale. Offsets keep one decimal, x/y and duration are whole numbers, opacity and scale keep two decimals.

Add keyframe splits the widest gap between neighbouring offsets and rounds the midpoint to a whole percent; the new frame starts at translate 0, rotate 0, scale 1, opacity 1, and the button is disabled at eight frames. Remove keeps at least two frames. Replay restarts the animation on the preview chip.

Copy CSS puts the export panel on the clipboard character for character; Reset restores kivMotion, 1400 ms, ease, one iteration and the three default frames.

Defaults, the limits that are written back on commit, and what this page leaves out

The two blocks and the order they print in

The export holds the @keyframes rule with one block per frame, sorted by offset, followed by the .animated-element declaration. Frames print in offset order even when they were added in another order; the frame picker keeps your original order and shows the offset on every entry.

The shorthand is animation: <name> <duration>ms <timing> 0ms <iterations> both. Two frames may share an offset: both blocks are exported and the later block at the same percentage is printed last.

Two to eight frames and the bounds written back on commit

Add keyframe splits the widest gap and rounds the midpoint: from the three defaults the next frames land at 25, 75, 13, 38 and 63% (final list 0, 13, 25, 38, 50, 63, 75, 100). At eight frames Add is disabled; at two frames Remove reports that a minimum of two frames is required.

Bounds are applied when the field loses focus: an offset of 150 is stored as 100, -50 as 0, opacity 3 as 1, scale 5 as 4, translate 400px as 300px and rotate 900deg as 720deg. Clearing a field restores its previous value. The frame list, the timeline markers and the export all carry the stored numbers, so a 150% frame can no longer be dropped by the CSS parser.

What this page does not do

Only transform and opacity are animated per frame: there is no per-frame colour, filter or background, no animation-delay, direction, fill or play-state control, and the exported class is always .animated-element. Everything runs in the page - driving the controls sends no network request.

Easing comes from the menu; the overshoot entry prints cubic-bezier(0.34, 1.56, 0.64, 1) rather than the word. There is no timeline drag, no GIF or video export and no second element to compare against; duplicate offsets are allowed and both blocks are exported.