CSS Animation Builder Formatter🔒 100% local
Build CSS animations visually. Privacy-first, no server uploads, no tracking.
Turns a one-line shorthand into a @keyframes block plus the rules that use it. The input is name, duration, timing-function with an optional delay and iteration-count; the name is matched case-insensitively against fourteen presets (fadein, fadeout, slideup, bounce, pulse, spin, shake, wobble, flip, zoom-in and others) and the matching keyframes are printed. A name with no preset gets a scaffold instead of an error. Nothing is applied to the page.
How to use it
- Type name, duration, timing - for example fadeIn, 1s, ease - and press Process.
- Read the emitted @keyframes block, then the .animated rule with the animation shorthand and the will-change hint.
- Check the longhand breakdown underneath to see what the shorthand expands to, and the performance notes for which properties are animating.
- Add a fourth value for delay and a fifth for iteration-count when you need them, for example spin, 2s, linear, 0.5s, infinite.
Worked example
fadeIn, 1s, easebecomes@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animated {
animation: fadeIn 1s ease both;
will-change: opacity;
transform-origin: center;
}The box also prints a longhand breakdown, two performance notes and a reuse line around this CSS.
spin, 2s, linear, 0.5s, infinitebecomes.animated {
animation: spin 2s linear 0.5s infinite both;
will-change: transform;
transform-origin: center;
}With a delay and an iteration count, the shorthand carries all five parts in order and the fill mode still trails them.
glow, 1s, easebecomesNo preset keyframes named "glow".
Available: fadein, fadeout, slideup, slidedown, slideleft, slideright, bounce, pulse, spin, rotate, shake, wobble, flip, zoom-in
Or write your own - generic scaffold:
@keyframes glow {
from { /* starting state */ }
to { /* ending state */ }
}An unknown name is not an error, but most of the output (timing, duration, the shorthand) is not produced for it.
When to use it
- Getting correct @keyframes syntax for a common entrance or attention animation without looking up the keyframe percentages.
- Checking the delay and iteration-count slots in the animation shorthand before pasting it into a stylesheet.
- Teaching yourself which of the presets animate transform and opacity only, so the animation stays off the layout and paint path.
What it does not do
- The timing-function check is a prefix match, so 'bounce, 1s, linearish' passes and the invalid value is emitted verbatim in both the shorthand and animation-timing-function.
- Leave out the iteration count and the CSS says animation-iteration-count: 1, yet the page still prints the tip about infinite decorative motion and prefers-reduced-motion.
- fill-mode both is always appended and cannot be switched off, and the delay and iteration-count slots are fixed to the fourth and fifth comma-separated values.
- The keyframe bodies come from the preset table. There is no editor for custom keyframes, so the scaffolded block for an unknown name always ends up hand-written.