What is the difference between this and a preset animation generator?

A preset generator only lets you pick a ready-made effect such as fade or bounce. This builder is a true timeline editor — you place keyframe stops at any percentage and set translate, scale, rotate, opacity, blur and colour independently at each stop, so you can author animations that no preset covers.

How do CSS @keyframes percentages work?

Each percentage marks a point in time within one cycle of the animation. 0% is the start and 100% is the end; the browser smoothly interpolates the listed properties between consecutive stops. Putting a stop at, say, 60% lets you create overshoot or anticipation before the element settles at 100%.

Which CSS properties does the builder animate?

It animates transform (translate, scale, rotate combined into one transform declaration), opacity, color and filter blur. Combining translate, scale and rotate in a single transform keeps the output GPU-friendly and avoids conflicting transform declarations.

What does the fill mode setting do?

animation-fill-mode controls how the element looks before the animation starts and after it ends. forwards keeps the final keyframe applied after it finishes, backwards applies the first keyframe during any delay, both does both, and none reverts to the element's normal styles outside the animation.

Is the generated CSS production ready?

Yes. The output is plain standard CSS — a named @keyframes block plus an animation shorthand on a .your-element selector. Rename the selector to match your markup, paste it into any stylesheet, and it works in every modern browser with no library or build step.

Is anything uploaded when I use this tool?

No. The editor, live preview and CSS generation all run entirely in your browser using JavaScript and the native CSS animation engine. Your work is auto-saved to this browser's local storage and is never sent to a server.

CSS Animation Builder

The CSS Animation Builder is a visual, multi-stop @keyframes editor for front-end developers and designers who want full control over a CSS animation without hand-writing every percentage block. Instead of choosing a single canned effect, you place keyframe stops anywhere on the timeline and shape the motion at each stop — translate, scale, rotate, opacity, blur and colour — while watching the result animate live on a real DOM element. When it looks right, you copy clean, standard CSS that works in every modern browser with no library, framework or build step.

It is built for the everyday animation jobs that presets never quite fit: an entrance that overshoots slightly before settling, a loader that eases through several positions, an attention pulse with a custom rhythm, or a brand colour cycle that alternates back and forth. Because every stop is independently editable, you can compose motion that would otherwise take several rounds of trial-and-error in the browser dev tools.

How it works

Pick one of the starting presets — Pop in, Slide up, Pulse, Shake, Spin or Colour shift — to load a working animation, then make it your own. Each dot on the timeline strip is a keyframe; click one to select it and the editor shows that stop’s properties. Drag the position slider to move the stop between 0% and 100%, and adjust the numeric fields to set how the element looks at that exact moment in the cycle. The builder sorts the stops by percentage, merges translate, scale and rotate into one transform declaration, and emits opacity, color and filter: blur() only where they change.

Above the editor, the animation-level controls set duration, delay, timing function (including a cubic-bezier overshoot and a steps function), iteration count, direction and fill mode. The preview box re-runs the animation whenever you press Restart, so you can scrub through variations quickly. Everything you build is auto-saved to your browser’s local storage, so closing the tab will not lose your work.

Example

Suppose you want a card to slide up, fade in and gently overshoot. Start from Pop in, move the middle keyframe to 70%, set its translateY to -6px and scale to 1.04, then set the 100% stop back to the resting state. Choose the back (overshoot) timing function, a duration of 0.8s, and 1 iteration with forwards fill so the card stays put when it lands. The tool produces something like:

@keyframes gera-pop-in {
  0% { transform: translate(0px, 40px) scale(0.6); opacity: 0; }
  70% { transform: translate(0px, -6px) scale(1.04); opacity: 1; }
  100% { opacity: 1; }
}

.your-element {
  animation: gera-pop-in 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s 1 normal forwards;
}

Copy the full CSS, rename .your-element to your own selector, and the animation is ready to ship. You can also copy just the @keyframes block or just the shorthand, or download a standalone .css file. Every figure is computed in your browser — nothing is uploaded.