⭐ 0
🔍
Text Image PDF & Docs Audio Music Electronics Time Utilities Validators Esoteric Games

CSS Keyframe Animation Generator

Build real @keyframes animations on a multi-track timeline — transform, opacity and background-color stops per track — with a draggable playhead that shows the exact interpolated mid-animation state.

Click anywhere on a lane to add a stop there. Drag a stop to move it, or edit its % and value fields below the lane. Double-click a stop to remove it (minimum 2 per track).

Processing... 0%

Result

A CSS @keyframes rule is really a small timeline: a set of percentage checkpoints, each one declaring what a property should look like at that exact moment, with the browser interpolating everything in between. Building one by hand means keeping several of these percentage checkpoints in your head at once across several properties — this generator turns that timeline into something you can actually see and drag: one horizontal lane per property, with a stop marker at every checkpoint.

The centerpiece is the scrub playhead. Drag it to any point between 0% and 100% and the preview box jumps to the exact combined state at that instant — not the nearest keyframe, but a real linearly-interpolated value computed between whichever two stops surround the playhead on every active track. Numeric properties like position, rotation and scale interpolate as plain numbers; background-color interpolates each red, green and blue channel independently, which is what makes a color track fade smoothly through intermediate hues instead of jumping between the colors you actually set.

Multiple tracks combine automatically into one coherent animation: every transform-based property (move, rotate, scale) merges into a single transform declaration at each keyframe percentage, while opacity and background-color stay on their own lines, exactly like real hand-written CSS would look. Percentages where a given track has no explicit stop are simply left out of that property's declarations on purpose — the browser's own keyframe interpolation fills the gap between whichever stops do exist, the same way it would for any @keyframes rule you typed by hand.

Five presets — bounce, shake, pulse, fade and slide-in — load a complete, ready-to-tweak timeline (including a sensible duration, timing function and repeat count) in one click. Hit Play at any point to see the real CSS animation run on the preview element, generated on the fly through a dynamically injected stylesheet, then copy the full @keyframes block plus the .animated-element { animation: ... } shorthand straight into your own project. Like every tool on this site, it all runs locally in the browser with nothing ever uploaded.

🛡️
Executed in Browser

Your files and inputs never leave this device. Processing runs completely offline. 100% Secure.

Accepted Formats & Rules

  • Multi-track timeline for transform (translateX, translateY, rotate, scale), opacity and background-color, each with its own draggable stops.
  • Real linear interpolation — numeric properties and per-channel RGB for colors — drives the scrub-preview between any two stops on a track.
  • A Play button applies the actual generated @keyframes CSS to the preview via a dynamically injected stylesheet, plus a copyable full @keyframes + animation shorthand output.

Key Benefits

✓ The draggable playhead shows real interpolated mid-animation state — not a jump between keyframe stops — exactly like the browser will actually render it.
✓ Every property lives on its own track with its own stops, so a bounce, a color shift and a fade can run on the same element at once without fighting each other.
✓ Five ready-made presets (bounce, shake, pulse, fade, slide-in) give a working starting point in one click, then every stop stays fully editable from there.

Use Cases

  • • Drag the scrub playhead to any point in a bounce or pulse animation to see the exact real interpolated mid-animation state before shipping the CSS.
  • • Layer a translateX track and an opacity track together to build a real slide-in-and-fade entrance animation, then copy the full @keyframes + animation shorthand.
  • • Add a background-color track alongside a scale track to animate a button's color and size together, watching the RGB channels blend live as you scrub.