CSS Keyframe Builder

Visual timeline editor for complex CSS keyframe animations.

Animation Settings

Animation Name

Duration (s)

Iteration Count

Timing Function

Direction

Keyframes

Preview

Animated

Generated CSS, HTML & Tailwind

@keyframes slideIn {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

.animated-element {
  animation: slideIn 1s ease 1 normal;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Keyframe Builder?

Build multi-step CSS @keyframes animations with a timeline editor. Add keyframe stops, set properties at each step, and copy the complete animation code.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Keyframe Builder

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Add keyframe stops

Click Add Step to insert percentage stops on the timeline. The 0% and 100% stops are always present. Add 50% for midpoints, or any value you need.

Set property values at each stop

For each step, enter the CSS property values: transform, opacity, color, etc. Only include properties that change - the browser interpolates the rest.

Set animation timing

Enter a name, duration, easing, and iteration count. Copy the complete @keyframes block and animation declaration.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css

@keyframes pulse {
  0%   { transform: scale(1);    opacity: 1; }
  50%  { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1);    opacity: 1; }
}

@keyframes slideIn {
  0%   { transform: translateX(-100%); opacity: 0; }
  60%  { transform: translateX(10px);  opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

.badge { animation: pulse 2s ease-in-out infinite; }
.panel { animation: slideIn 0.4s ease-out both; }

Name your keyframes descriptively (slideIn, fadeOut, pulse) rather than generically (animation1, anim). Good names make the CSS self-documenting.

Pro tips

Pro tips for better results

★

Only animate transform and opacity for performance

These are the only two properties composited by the GPU without triggering layout. Animating width, height, margin, or background causes jank at anything below 60fps.

★

Use from and to as aliases for 0% and 100%

from and to are valid in @keyframes as shorthand for 0% and 100%. Use them when you only have two stops for cleaner code.

★

animation-fill-mode: both freezes the start and end states

Without fill-mode, an animated element snaps back to its default state at the end. both applies the from styles before the animation and the to styles after it ends.

FAQ

Frequently asked questions

Yes. Define the @keyframes block once and reference its name in the animation property on as many elements as you need. Each element can have different durations, delays, and iteration counts.

While the animation runs, it overrides the base style for the animated properties. When animation-fill-mode is forwards or both, the final keyframe value persists. When the animation ends with no fill-mode, the base style takes over again.

No. Everything runs in your browser. Nothing is sent to a server.