Skip to content

CSS Animation Timeline Editor

Place keyframes on a real timeline, drag them, give each one its own easing, then copy the generated @keyframes. Onion-skin ghosting shows the previous frames.

0%playhead 0.0% · 0.00s of 2.00s100%
translate X
translate Y
rotate
scale
skew X
opacity
background-color
border-radius
filter: blur
filter: grayscale

Drag a dot to move its keyframe · double-click a track to add one at that point.

Timing

Keyframe @ 55%

0px
0px
0deg
1.08×
0deg
1.00
inherited
12%
0.00px
0.00

Generated CSS

<div class="mover"></div>

@keyframes my-animation {
  0% {
  transform: translate(0.00px, -120.00px) rotate(0.00deg) scale(0.600) skewX(0.00deg);
  opacity: 0.000;
  background-color: #4F46E5;
  border-radius: 12.00%;
  filter: blur(0.00px) grayscale(0.00);
    animation-timing-function: ease-in;
  }
  55% {
  transform: translate(0.00px, 0.00px) rotate(0.00deg) scale(1.080) skewX(0.00deg);
  opacity: 1.000;
  background-color: #4f46e5;
  border-radius: 12.00%;
  filter: blur(0.00px) grayscale(0.00);
    animation-timing-function: ease-out;
  }
  75% {
  transform: translate(0.00px, -26.00px) rotate(0.00deg) scale(0.980) skewX(0.00deg);
  opacity: 1.000;
  background-color: #4f46e5;
  border-radius: 12.00%;
  filter: blur(0.00px) grayscale(0.00);
    animation-timing-function: ease-in-out;
  }
  100% {
  transform: translate(0.00px, 0.00px) rotate(0.00deg) scale(1.000) skewX(0.00deg);
  opacity: 1.000;
  background-color: #4F46E5;
  border-radius: 12.00%;
  filter: blur(0.00px) grayscale(0.00);
    animation-timing-function: ease-out;
  }
}

.mover {
  width: 120px;
  height: 120px;
  background-color: #4F46E5;
  animation: my-animation 2000ms linear infinite;
}

About this tool

Every property track is sampled on the same timeline, so the exported @keyframesmerges all of them into one percentage list with per-keyframe animation-timing-function. The preview, the onion-skin ghosts and the CSS all come from the same interpolation routine, and the whole editor runs in your browser.

  • 100% free — no account needed
  • Runs in your browser
  • Nothing is uploaded

Frequently asked questions

Is CSS Animation Timeline Editor really free?

Yes. CSS Animation Timeline Editor is completely free on PureBrowser — every feature, with no account, no trial, and no credit card.

Does CSS Animation Timeline Editor upload my data?

No. CSS Animation Timeline Editor runs entirely inside your browser, so anything you type, paste, or open stays on your own device.

Do I need to sign up or install anything?

Neither. There is no account and nothing to download — open the page and CSS Animation Timeline Editor is ready to use on desktop or mobile.

Does CSS Animation Timeline Editor work offline?

Once the page has loaded, yes. All of the processing happens locally in your browser, so it keeps working without a connection.

More design & visual

CSS Gradient Generator

Create linear CSS gradients with a live preview.

CSS Box Shadow Generator

Build and preview CSS box-shadow values with one-click copy.

CSS Glassmorphism Generator

Generate frosted-glass CSS with backdrop blur and copy-ready styles.

QR Code Generator

Generate custom QR codes for any text or URL.

WiFi QR Code Generator

Generate a scannable QR code to share WiFi credentials instantly.

Letter Profile Picture

Generate avatar images from initials with custom colors.