Which CSS properties does the timeline animate?

Each frame generates opacity and a transform combining translate X/Y, rotation and scale. Keeping the editor limited to these numeric properties makes the generated CSS predictable.

How do I add or remove a keyframe?

Use Add frame to insert a midpoint between existing percentages. Remove frame deletes a row; at least two and at most twelve keyframes are allowed, and each percentage must be unique.

Can the animation repeat or reverse?

Yes. Choose an iteration count or infinite, a direction, fill mode, easing, duration and delay. The output uses standard CSS animation properties.

What does the reduced-motion option do?

When enabled, the output includes a prefers-reduced-motion media rule that shortens the animation and limits it to one iteration for users who request reduced motion.

Is my design uploaded or saved?

No. Keyframes and CSS are generated locally in your browser; settings are not stored or transmitted.

CSS · GENERATOR

CSS Animation Generator

Build an animation from editable keyframes. Tune movement, scale, rotation and opacity; set CSS timing behavior; then replay the preview and copy the generated @keyframes.

Editable timeline · Transform & opacity · Reduced-motion option

Design a switch to animate? CSS Toggle Generator →Frame values are numeric and bounded; arbitrary CSS is not accepted.

Animation settings

Presets

Name & preview

Animation nameCSS identifier; reserved CSS names are not accepted.

Preview / HTML text

Preview shape

Timing

Duration ms

Delay ms

Easing

Iterations

Direction

Fill mode

Include reduced-motion fallback

Keyframes

%	X px	Y px	Scale	Rotate °	Opacity %	Remove

3 of 12 frames

Percentages must be unique. Values use translate, rotate, scale and opacity only.

Live preview

Motion

Animation preview

Generated source

Frames: 0Duration: 0 msCSS: 0 B

CSS keyframes · No library required

How the keyframe editor works

Each row represents a percentage in @keyframes. The generated rule animates opacity and a transform made from translate X/Y, rotation and scale. Add a frame to split the widest interval, adjust its values, or choose a preset such as fade, slide, pop, bounce, spin or pulse.

The output includes the animation name, duration, easing, delay, iteration count, direction and fill mode. Copy the CSS and add the generated dwt-animated class to the element in your HTML.

Motion and bounds

Use 2–12 unique frame percentages from 0 to 100. Translation is limited to ±500 px, scale to 0–5, rotation to ±1080°, and opacity to 0–100%.
Animation name is validated as a CSS identifier. The generator does not accept free-form CSS values.
The reduced-motion option adds a prefers-reduced-motion rule with a 1 ms duration and one iteration.
Preview and output are computed in your browser; settings are not uploaded or stored.