CSS & animation tools

CSS Animation Timeline Scrubber

Pick a keyframe preset, drag the timeline to any point in the animation, or paste your own custom keyframes and scrub through them frame by frame.

Custom keyframes

Paste just the body of a @keyframes rule — no wrapper needed, for example 0%{opacity:0} 100%{opacity:1}.

How to use the CSS animation timeline scrubber

  1. Pick a presetChoose Bounce, Spin, Pulse, Slide In, Shake or Fade, or paste your own custom keyframes below.
  2. Scrub the timelineDrag the Timeline position slider to jump straight to any frame while the preview is paused.
  3. Play it backPress Play to watch it loop live, then Pause to freeze it at the exact frame you landed on.

How the scrubbing works

This tool relies entirely on standard CSS animation properties, no video recording or frame-by-frame rendering involved. The preview box always has animation-iteration-count: infinite and starts with animation-play-state: paused. Moving the timeline slider sets a negative animation-delay proportional to the slider position and the chosen duration, which makes the browser render that exact point in the animation instantly. Pressing Play switches the play-state to running and keeps the slider in sync using requestAnimationFrame; pressing Pause freezes the play-state again and reapplies the delay for whatever frame the slider last showed.

The negative-delay trick

A negative animation-delay tells the browser the animation already started that many seconds ago, so it jumps straight to that point without actually playing through it.

Built-in presets

Bounce, spin, pulse, slide, shake and fade are defined as ordinary @keyframes rules in the page's own stylesheet.

Bring your own keyframes

Paste any valid keyframes body to preview and scrub through your own custom animation the same way.

100% client-side

No canvas, no video encoding — just CSS properties toggled with JavaScript, so it works fully offline.

CSS Animation Timeline Scrubber FAQ

How does dragging the slider show a specific animation frame while paused?

It uses a standard CSS trick: while the preview is paused, the tool sets a negative animation-delay equal to how far into the animation you want to be. A negative delay makes the browser act as if the animation already started that long ago, so it renders that exact frame instantly, even though play-state stays paused.

Do I need to include @keyframes name{ } when pasting custom keyframes?

No. Paste only the body — the percentage steps and their styles, like 0%{opacity:0} 100%{opacity:1}. The tool wraps it in @keyframes ba-custom{ ... } for you and injects it into the page automatically.

Does this tool work offline?

Yes. Everything — the presets, the scrubbing, and the custom keyframe injection — runs with plain CSS and JavaScript already loaded on the page, with no external requests.

Can I use this to record or export a video of the animation?

No. This is a live preview and scrubbing tool for testing and inspecting CSS keyframe animations in your browser. It does not record or export video.

What happens if my custom keyframes are invalid CSS?

The browser simply ignores the parts it cannot understand, so an invalid custom keyframe rule will not throw an error — it may just not animate the way you expect. Check your syntax and press Apply custom again.

Try other free tools

More handy tools from My Panda Toolbox.

KEYCSS Animation Keyframe VisualizerVisualize a keyframe animation's timing.EASECSS Animation Easing VisualizerCompare easing curves side by side.GRDCSS Gradient GeneratorBuild and copy CSS gradients visually.