CSS Keyframe Builder

Original Utility Suite

Build animations on a visual timeline, export pure @keyframes CSS.

Presets

Keyframe at 50%

Translate X

Translate Y

Scale

Rotate

deg

Opacity

Animation

Duration1.5s

Easing

Iterations

Direction

Timeline

0%50%100%

3 keyframes. Click the track to add, drag a dot to retime.

Preview

CSS output

@keyframes my-animation {
  0% {
    transform: none;
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: none;
  }
}

.animated-element {
  animation: my-animation 1.5s ease-in-out infinite normal;
}

What is CSS Keyframe Builder?

CSS Keyframe Builder lets you design a transform animation on a visual timeline and exports clean, standard @keyframes CSS. Add keyframes along the track, set translate, scale, rotate, and opacity for each one, and watch a live preview loop as you edit. When it looks right, copy or download the CSS — everything runs in your browser with no build step and no account.

How to use CSS Keyframe Builder

Start from a preset or blank
Pick a preset to load a ready-made animation, or begin with the default start and end keyframes and build from there.
Add and place keyframes
Click anywhere on the timeline track to add a keyframe, and drag any dot to retime it. The start and end sit at 0% and 100%, while new stops interpolate from the surrounding values.
Edit the transform
Select a dot to adjust its Translate X and Y, Scale, Rotate, and Opacity with sliders or exact number inputs. Every change updates the preview instantly.
Tune the animation settings
Set the duration, easing, iteration count, and direction. Use Play, Pause, and Restart to review the loop, and delete any keyframe except the fixed endpoints.
Copy or download the CSS
Copy the generated @keyframes and animation shorthand, or download it as animation.css to drop into your stylesheet.

Common uses

Build a bounce, pulse, or slide-in effect for a UI element
Prototype a hover or attention animation without hand-writing keyframes
Fine-tune easing and timing while watching a live preview
Learn how transform and opacity keyframes translate into CSS
Generate reusable @keyframes for a design system or component library
Create a looping animation for a loader, badge, or call-to-action

Why choose FreeTools

100% private

Your files are processed inside your browser and are never uploaded to a server.

Free, no account

No sign-up, no watermark, no paywalled “premium” tier. Just open a tool and use it.

Instant

No upload, no queue, no server round-trip — work starts the moment you drop a file.

Runs in your browser

Built on open web standards. Works on any modern desktop browser, nothing to install.

No upload size caps

Nothing leaves your device, so there’s no server file-size limit — only your machine’s memory.

Yours to keep

Results download straight to your device in clean, standard file formats.