CSS keyframes generator

← All tools

Add keyframe stops, tune animation settings, preview the motion, and copy the full CSS block.

~~~

Presets

Keyframe stops

Animation settings

Name

Duration (ms)

Easing

Delay (ms)

Iterations

Direction

Fill mode

Include prefers-reduced-motion wrapper

Preview

~~~

Output

Animation settings are saved in the URL. Assign class animated to any element.

~~~

About this tool

CSS animations run on a timeline defined by @keyframes. Each stop sets transform and opacity at a percentage. Theanimation shorthand wires name, duration, easing, delay, iteration count, direction, and fill mode.

Always respect prefers-reduced-motion for users who disable motion in their OS settings.

Transforms compose in the order translate, scale, then rotate at each stop — reordering in hand-written CSS changes the arc. Useanimation-fill-mode: forwards when the element should stay on its last keyframe (common for entrance animations). Infinite loops are fine for loaders; avoid them on large hero text. Assign the generated .animated class or rename it to match your BEM convention.

~~~