Skip to content
TextArray1.87.0
100% local

CSS keyframes generator

Turn percent;property:value steps into a @keyframes block and its animation shorthand.

Input
Output
Related tools
CSS gradient generatorDeveloper tools
CSS box-shadow generatorDeveloper tools
CSS grid generatorDeveloper tools
i18n key diffDeveloper tools
TOML to JSON converterDeveloper tools
SQL to JSONDeveloper tools
CSS keyframes generator
Paste keyframe steps as percent;property:value — one line per stop, such as 0;opacity:0 followed by 100;opacity:1 — and this tool assembles a complete @keyframes block plus the matching animation shorthand declaration. Add several property:value pairs to the same line, separated by semicolons, to animate more than one property at that stop, and reuse a percent across multiple lines to keep adding properties to it.
Pick a preset — fade, slide, pulse, shake or bounce — to skip writing steps by hand and get a ready animation with all the options still adjustable, or switch the preset to custom to drive every stop from your own input. The remaining options shape the animation shorthand: name sets the identifier shared by the @keyframes rule and the animation declaration, duration and delay are in seconds, and the timing function covers every standard keyword plus a custom cubic-bezier() curve for an exact easing shape. Set the animation to repeat a fixed number of times or turn on infinite, choose a direction (normal, reverse, alternate, alternate-reverse) and a fill mode for what happens before and after it runs, and turn on the webkit prefix option to also emit an @-webkit-keyframes block and a -webkit-animation line for older Safari and Android WebView builds.
Percent values outside 0–100 are clamped into range, "from" and "to" are accepted as aliases for 0 and 100, and blank or malformed lines are skipped rather than breaking the output. The tally under the output reports how many keyframe stops were generated and the exact character count.
Everything runs locally in your browser as you type — no CSS or animation data is ever sent to a server. Copy the result, download it as a .txt file, or send the output back into the input to keep refining the steps.
FAQ
What does the input format actually look like?
One line per keyframe stop: a percent, a semicolon, then property:value. Add more property:value pairs on the same line, each separated by a semicolon, to animate several properties at once — for example 50;opacity:0.5;transform:scale(1.1).
What happens when I pick a preset like fade or bounce?
The tool uses a built-in set of keyframe steps for that preset and ignores whatever is in the input box, while all the other options — name, duration, timing, direction and so on — still apply. Switch to custom to use your own input again.
How do I get an exact custom easing curve?
Set the timing function to custom and enter four comma-separated numbers in the cubic-bezier field, such as 0.25, 0.1, 0.25, 1. An invalid value falls back to ease rather than producing broken CSS.
What's the difference between iteration count and infinite?
Iteration count sets how many times the animation plays before stopping. Turning on infinite overrides that and repeats the animation indefinitely.
Is my animation data uploaded anywhere?
No. The @keyframes block and animation shorthand are generated entirely in your browser — nothing you type ever leaves your device.